Zipping two arrays in Javascript

Question

I have the following arrays:

const prev = [A, C, D, E]
const curr = [A, B, D, F]

What is the most elegant way of producing the following output?

[[A, A], [null, B], [C, null], [D, D], [E, null], [null, F]]

A, B, C, .. are objects that can be mapped on an equal field, e.g.:

A = {id: "A", ... }

The order of the final array doesn't matter.

EDIT: The two arrays are not necessarily the same length.

Are the two arrays match in their length? – vsync Sep 06 '22 at 18:51 — vsync, Sep 06 '22 at 18:51

score 1 · Answer 1 · answered Sep 06 '22 at 19:28

Here is what I think is a solution that is easy to understand (but may not be the fastest or shortest).

First, combine the arrays (concat)
While there are elements in the new list:
- Get the first element
- Use the given comparator to find the index of another element deemed the same by the comparator
- If an index was found, use the index to get the element and delete it from the list
  - otherwise, it's null
- Add the first element and the other element to the result

It seems to work, and you can change the comparator if you want to change the criteria the output is zipped by.

const prev = ["A", "C", "D", "E"];
const curr = ["A", "B", "D", "F"];

const comparator = (a, b) => a === b; // a.id === b.id

const zip = (a, b, comparator) => {
    const result = [];
    
    const list = a.concat(b);
    
    while (list.length) {
        const element = list.shift();
        
        const pairIndex = list.findIndex((x) => comparator(x, element));
        
        const pair = pairIndex >= 0 ? list.splice(pairIndex, 1)[0] : null;
        
        result.push([element, pair]);
    }
    
    return result;
};

console.log(zip(prev, curr, comparator));

score 1 · Answer 2 · answered Sep 06 '22 at 19:50

1

Iterate the first one and populate the hash value => [value,null]. Iterate the second one, if value is in the hash, replace null with the value, otherwise add [null, value]:

const prev = ['A','C','D','E']
const curr = ['A','B','D','F']

let m = {}

for (let a of prev)
    m[a] = [a, null]

for (let a of curr)
    if (a in m)
        m[a][1] = a
    else
        m[a] = [null, a]

console.log(...Object.values(m))

answered Sep 06 '22 at 19:50

gog

10,367
2
24
38

in `for (let a of curr)`, you can always do `m[a][1] = a` and skip the first `if` statement. Both `if`/`lese` has it at index `1` – vsync Sep 06 '22 at 21:18
@vsync: not sure what you mean here. If `a` doesn't exist in`m`, how can I do `m[a][1] = ...` ? – gog Sep 07 '22 at 10:44
Do: `m[a] = a in m ? [a, a] : [null, a]` – vsync Sep 07 '22 at 10:58
@vsync: if a is already in m, there's no point in reassigning it. – gog Sep 07 '22 at 11:16
Depending on the length of the arrays, it's a matter of readability vs performance – vsync Sep 07 '22 at 11:55

Asleepace · Answer 3 · 2022-09-07T00:17:06.917

1

Assuming a max amount of two values per entry, the following works:

const prev = ['A', 'C', 'D', 'E']
const curr = ['A', 'B', 'D', 'F']

const hash = [...prev, ...curr].reduce((set, v, idx) => {
  set[v] = set[v] ? [v, v] : idx < prev.length ? [v, null] : [null, v]
  return set
}, {})

console.log(Object.values(hash))

edited Sep 07 '22 at 00:17

answered Sep 06 '22 at 21:09

Asleepace

3,466
2
23
36

1

incorrect output & logic.... – vsync Sep 06 '22 at 21:21
1

The problem with this approach is that `B` is reduced to `[B, null]` instead of `[null, B]`. The same goes for every other element which is only in `curr`. – Enrico Maria Sep 06 '22 at 21:24
@EnricoMaria ah missed that part, fixed! – Asleepace Sep 07 '22 at 00:17
@vsync fixed as well – Asleepace Sep 07 '22 at 00:18

score 0 · Answer 4 · answered Sep 06 '22 at 19:21

I would use this algorithm

const prev = [{ id: "A" }, { id: "C" }, { id: "D" }, { id: "E" }]
const curr = [{ id: "A" }, { id: "B" }, { id: "D" }, { id: "F" }]

const res = [];

const charCodeA = 'A'.charCodeAt(0);

let prevIndex = 0, currIndex = 0;

while (prevIndex < prev.length || currIndex < curr.length) {
  const left = prev[prevIndex]?.id.charCodeAt(0) === res.length + charCodeA ? 
    prev[prevIndex] : null;
  const right = curr[currIndex]?.id.charCodeAt(0) === res.length + charCodeA ?
    curr[currIndex] : null;
 
  
  if (left) {
    prevIndex++;
  }
  
  if (right) {
    currIndex++;
  }
  
  res.push([left, right])
}

console.log(res)

This seems to go into an infinite loop if the elements are not "sorted". — kelsny, Sep 06 '22 at 19:25

score 0 · Answer 5 · answered Sep 06 '22 at 19:30

0

Use set operations to find all the values that are in common between the two arrays, only in the first array, and only in the second array. Then create the appropriate pairs for each group.

const prev = ['A', 'C', 'D', 'E'];
const curr = ['A', 'B', 'D', 'F'];

const prevSet = new Set(prev);
const currSet = new Set(curr);

const intersection = prev.filter(el => currSet.has(el));
const only_prev = prev.filter(el => !currSet.has(el));
const only_curr = curr.filter(el => !prevSet.has(el));

let result = intersection.map(el => [el, el]);
result = result.concat(only_prev.map(el => [el, null]));
result = result.concat(only_curr.map(el => [null, el]));

console.log(result);

answered Sep 06 '22 at 19:30

Barmar

741,623
53
500
612

why did you convert it to a `Set`? seems useless – vsync Sep 06 '22 at 21:15
If the arrays are large, `Set.has()` is more efficient than `Array.includes()` – Barmar Sep 06 '22 at 21:16
Incorrect. V8 highly optimizes `includes()` - https://stackoverflow.com/a/57277566/104380 – vsync Sep 06 '22 at 21:26

score 0 · Answer 6 · answered Sep 06 '22 at 19:58

Maybe try something more generic like this:

function zip(lists = []) {
    const joined = lists.flatMap(list => list); // Put all elements in a single list
    const set = new Set(joined); // Create a set to only have distinct elements
    const items = [...set]; // Convert the set to a list
    items.sort() // Sort the list
    const result = []; // Create the result array
    items.forEach(item => {
        const zippedItem = []; // Create the zip line
        lists.forEach(list => {
            if (list.includes(item)) zippedItem.push(item); // only push the item if is present in one of the original arrays
            else zippedItem.push(null); // Otherwise push a null value
        });
        result.push(zippedItem); // Push the zipped item to the result array
    })
    return result; // Return the zipped values
}

Use the function like this:

const prev = ['A', 'C', 'D', 'E'];
const curr = ['A', 'B', 'D', 'F'];

const zipped = zip([prev, curr]);

This will produce this result;

[
  [ 'A', 'A' ],
  [ null, 'B' ],
  [ 'C', null ],
  [ 'D', 'D' ],
  [ 'E', null ],
  [ null, 'F' ]
]

Zipping two arrays in Javascript

6 Answers6