253

I have 2 arrays:

var a = [1, 2, 3]
var b = [a, b, c]

What I want to get as a result is:

[[1, a], [2, b], [3, c]]

It seems simple but I just can't figure out.

I want the result to be one array with each of the elements from the two arrays zipped together.

2
  • 3
    Note that array map() is not supported in IE8, if that is a problem. Polyfill here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – TimHayes
    Commented Feb 25, 2014 at 13:37
  • 20
    This question is NOT a duplicate as it only asks for 2 arrays to be zipped instead of N arrays. Thus it is a special case for which there are specialized, more performant solutions.
    – le_m
    Commented Jun 4, 2016 at 0:52

6 Answers 6

381

Use the map method:

var a = [1, 2, 3]
var b = ['a', 'b', 'c']

var c = a.map(function(e, i) {
  return [e, b[i]];
});

console.log(c)

DEMO

13
  • 5
    Total javascript noob here, but I was under the impression that the index has to come before the element? that is, .map(function(index,element))?
    – runawaykid
    Commented Oct 29, 2016 at 11:05
  • 18
    @runawaykid The answer is correct. You can see the MDN map documentation on the callback parameter. Params are (in order): currentvalue, index, array
    – icc97
    Commented Jan 6, 2017 at 15:22
  • 23
    Using the arrow notation is even a bit nicer: var c = a.map((e, i) => [e, b[i]]);
    – marczoid
    Commented Nov 15, 2017 at 10:39
  • 1
    How would you create a dictionary/object from this?
    – Climax
    Commented Apr 26, 2018 at 6:50
  • 4
    Just note that if the arrays are different lengths, then this will either pad the right side with undefined values (if a is longer) or will omit some entries (if b is longer).
    – ErikE
    Commented Feb 19, 2020 at 18:56
147

Zip Arrays of same length:

Using Array.prototype.map()

const zip = (a, b) => a.map((k, i) => [k, b[i]]);

console.log(zip([1,2,3], ["a","b","c"]));
// [[1, "a"], [2, "b"], [3, "c"]]

Zip Arrays of different length:

Using Array.from()

const zip = (a, b) => Array.from(Array(Math.max(b.length, a.length)), (_, i) => [a[i], b[i]]);

console.log( zip([1,2,3], ["a","b","c","d"]) );
// [[1, "a"], [2, "b"], [3, "c"], [undefined, "d"]]

Using Array.prototype.fill() and Array.prototype.map()

const zip = (a, b) => Array(Math.max(b.length, a.length)).fill().map((_,i) => [a[i], b[i]]);

console.log(zip([1,2,3], ["a","b","c","d"]));
// [[1, "a"], [2, "b"], [3, "c"], [undefined, "d"]]

Zip Multiple (n) Arrays:

const zip = (...arr) => Array(Math.max(...arr.map(a => a.length))).fill().map((_,i) => arr.map(a => a[i]));  
console.log(zip([1,2], [3,4], [5,6])); // [[1,3,5], [2,4,6]]

8
  • 1
    Thanks for this. Foruntanely map worked in my environment nevertheless I've recorded this method just in case.
    – userMod2
    Commented Feb 26, 2014 at 13:05
  • 2
    Elegant, but faulty. Classic zip must be commutative, this implementation is not. check out with arrays of different length.
    – goteguru
    Commented Nov 11, 2020 at 10:11
  • 3
    Thank you @goteguru, I added two more example for array of different length. Commented Nov 11, 2020 at 18:28
  • 5
    Thx @RokoC.Buljan, nice. However I think it should be Math.min. zip comes from the functional languages (just like filter, map, reduce and friends) and it's main purpose is to feeding two streams into one binary computation. The result is undefined anyway if one of them is missing, therefore we should stop early. Moreover, in FP the streams may be infinite (!) which would mean the above algorithm never stops. Of course it's not the case using js Arrays, but still this is the classic "zip". (Performance wise: imagine one array has 100k items, and the other has only twelve).
    – goteguru
    Commented Nov 12, 2020 at 20:20
  • 1
    This is the correct answer to the question, and not the one that OP accepted. Commented Mar 2, 2022 at 11:03
9

Zipping by leveraging generator functions

You can also use a generator function to zip().

const a = [1, 2, 3]
const b = ['a', 'b', 'c']

/**
 * Zips any number of arrays. It will always zip() the largest array returning undefined for shorter arrays.
 * @param  {...Array<any>} arrays 
 */
function* zip(...arrays){
  const maxLength = arrays.reduce((max, curIterable) => curIterable.length > max ? curIterable.length: max, 0);
  for (let i = 0; i < maxLength; i++) {
    yield arrays.map(array => array[i]);
  }
}

// put zipped result in an array
const result = [...zip(a, b)]

// or lazy generate the values
for (const [valA, valB] of zip(a, b)) {
  console.log(`${valA}: ${valB}`);  
}
.as-console-wrapper { max-height: 100% !important; top: 0; }

The above works for any number of arrays and will zip() the longest array so undefined is returned as a value for shorter arrays.

Zipping of all Iterables

Here a function which can be used for all Iterables (e.g. Maps, Sets or your custom Iterable), not just arrays.

const a = [1, 2, 3];
const b = ["a", "b", "c"];

/**
 * Zips any number of iterables. It will always zip() the largest Iterable returning undefined for shorter arrays.
 * @param  {...Iterable<any>} iterables
 */
function* zip(...iterables) {
  // get the iterator of for each iterables
  const iters = [...iterables].map((iterable) => iterable[Symbol.iterator]());
  let next = iters.map((iter) => iter.next().value);
  // as long as any of the iterables returns something, yield a value (zip longest)
  while(anyOf(next)) {
    yield next;
    next = iters.map((iter) => iter.next().value);
  }

  function anyOf(arr){
    return arr.some(v => v !== undefined);
  }
}

// put zipped result in aa array
const result = [...zip(a, new Set(b))];

// or lazy generate the values
for (const [valA, valB] of zip(a, new Set(b))) {
  console.log(`${valA}: ${valB}`);
}

Obviously it would also be possible to just use [...Iterable] to transform any Iterable to an array and then use the first function.

4

Using the reduce method:

const a = [1, 2, 3]
const b = ['a', 'b', 'c']

var c = a.reduce((acc, curr, ind) => {
  acc.push([curr, b[ind]]);
  return acc;
}, []);
console.log(c)

With forEach method:

const a = [1, 2, 3]
const b = ['a', 'b', 'c']
const c = [];
a.forEach((el, ind) => {
    c.push([el, b[ind]])
});
console.log(c)

1

Providing a solution with imperative programming by a simple for loop.

This performs better when doing the zip operation on huge data sets compared to the convenient array functions like map() and forEach().

Example:

const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const result = [];
for (let i = 0; i < a.length; i++) {
  result.push([a[i], b[i]]);
}
console.log(result);

And if you want a 1 line simpler solution then you can use a library like ramda which has a zip function.

Example:

const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const result = R.zip(a, b);
console.log(result);
0

Zip function for 2D arrays

Here is a function that zips multiple arrays. However, It only works with 2D arrays only.

function zip(listOfLists) {
  return listOfLists[0].map((value, index) => {
      let result = [];

      for(let i=0; i <= listOfLists.length-1 ; i++){
          result[i] = listOfLists[i][index]
      }
      return result;
  });
}

This is how you run it.

console.log(
  zip(
    [[1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]]
  )
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.