snippetjavascriptTip

How can I zip and unzip arrays in JavaScript?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptunzipziphowandarrayscan

Problem

Zipping two or more arrays refers to combining their elements into a single array of arrays. As it sounds pretty vague, let's look at an example:
As you can see, this first array in this example contains all the first elements of the original arrays, the second array contains all the second elements, and so on.
Zipping requires the creation of an array with the length of the longest array in the arguments. We can use Math.max() and the spread operator (...) to get the longest subarray in the array and Array.from() to create an array of appropriate length.
Then, using Array.prototype.map(), we can create an array for each element of the new array. The length of each array is the number of arguments passed to the function. Using the last argument in Array.from(), we can map over the indices of the original arrays and create a new array with the elements at that index.
The inverse of zipping is unzipping, which converts the array of arrays back into separate arrays. We can use Math.max() and the spread operator (...) to get the longest subarray in the array and Array.from() to create an array of appropriate length.

Solution

const arrays = ['a', 'b'], [1, 2], [true, false];
const zipped = [['a', 1, true], ['b', 2, false]]

Zipping requires the creation of an array with the length of the longest array in the arguments. We can use Math.max() and the spread operator (...) to get the longest subarray in the array and Array.from() to create an array of appropriate length.
Then, using Array.prototype.map(), we can create an array for each element of the new array. The length of each array is the number of arguments passed to the function. Using the last argument in Array.from(), we can map over the indices of the original arrays and create a new array with the elements at that index.
The inverse of zipping is unzipping, which converts the array of arrays back into separate arrays. We can use Math.max() and the spread operator (...) to get the longest subarray in the array and Array.from() to create an array of appropriate length.
Then, using Array.prototype.reduce() and Array.prototype.forEach(), we can map grouped values to individual arrays, by pushing each value to the array at the same index.
If you want to zip an array into an object, you can use a similar technique to the one used for zipping arrays. The only difference is that you need to use Array.prototype.reduce() to assign the key-value pairs to the object.
Unzipping an object into a pair of arrays is quite simple. You can use Object.keys() and Object.values() to get the keys and values of the object as arrays.

Code Snippets

const arrays = ['a', 'b'], [1, 2], [true, false];
const zipped = [['a', 1, true], ['b', 2, false]]

const zip = (...arrays) => {
  const maxLength = Math.max(...arrays.map(x => x.length));
  return Array.from({ length: maxLength }).map((_, i) => {
    return Array.from({ length: arrays.length }, (_, k) => arrays[k][i]);
  });
};

zip(['a', 'b'], [1, 2], [true, false]); // [['a', 1, true], ['b', 2, false]]
zip(['a'], [1, 2], [true, false]); // [['a', 1, true], [undefined, 2, false]]

const unzip = arr =>
  arr.reduce(
    (acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc),
    Array.from({
      length: Math.max(...arr.map(x => x.length))
    }).map(x => [])
  );

unzip([['a', 1, true], ['b', 2, false]]); // [['a', 'b'], [1, 2], [true, false]]
unzip([['a', 1, true], ['b', 2]]); // [['a', 'b'], [1, 2], [true]]

Context

From 30-seconds-of-code: zip-unzip-array

Revisions (0)

No revisions yet.