How to Zip Two Arrays in JavaScript

This tutorial provides step by step instruction on how to zip arrays in JavaScript. Following is a list of solutions with code examples you can try to zip arrays.

Zip Two or More Arrays in JavaScript

What is Zipping Arrays
Solution 1: Zip Arrays Using a Loop
Solution 2: Zip Arrays Using map() Method
Solution 3: Zip Arrays of Different Length Using Array.from()
Solution 4: Zip Arrays of Different Length Using fill() and map() Methods
Solution 5: Zip Two Dimensional (2D) Arrays Using Loop
Solution 6: Zip Multiple Arrays Using fill() and map() Methods

What is Zipping Arrays

The zipping two arrays refers to combining elements from two separate arrays into a single array by pairing their elements. This operation creates a new array where each element combines corresponding elements from the original arrays.

For example, consider two arrays:

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

Zipping these arrays would result in a new array where each element is a pair containing elements from the same index positions in the original arrays:

// Result after zipping array1 and array2
const zippedArray = [
  [1, 'a'],
  [2, 'b'],
  [3, 'c']
];

In the above zipped array, the first element [1, 'a'] consists of the first elements from array1 and array2, the second element [2, 'b'] consists of the second elements from both arrays, and so on.

The process of zipping arrays is commonly used to merge or combine related data from different arrays into a format that's more convenient to work with, especially when the data in both arrays correlates based on their indexes. Here is a step by step tutorial on how to achieve this in JavaScript.

Solution 1: Zip Arrays Using a Loop

// Step 1: Define two arrays to be zipped 
const array1 = [1, 2, 3, 4]; 
const array2 = ['a', 'b', 'c', 'd']; 

// Step 2: Create a function to zip the arrays 
function zipArrays(arr1, arr2) { 
  const zippedArray = []; 

  // Check if both arrays are of the same length 
  if (arr1.length !== arr2.length) { 
    throw new Error('Arrays must have the same length for zipping.'); } 

  // Loop through the arrays and zip the elements 
  for (let i = 0; i < arr1.length; i++) { 
    zippedArray.push([arr1[i], arr2[i]]); 
  } 

 return zippedArray; 

} 

// Step 3: Call the function to zip the arrays 
const zippedResult = zipArrays(array1, array2); 

// Step 4: Display the zipped result 
console.log('Zipped Array:', zippedResult); 

//Output: Zipped Array: [ [ 1, 'a' ], [ 2, 'b' ], [ 3, 'c' ], [ 4, 'd' ] ]

In the above example, two arrays are created: array1 contains numeric elements [1, 2, 3, 4], and array2 contains string elements ['a', 'b', 'c', 'd'].

A function zipArrays is defined to zip two arrays.
It initializes an empty array zippedArray to store the zipped elements.
It checks if both arrays have the same length. If not, it throws an error.
Then, it iterates through the arrays and creates subarrays by combining elements from both arrays at the same index.
Finally, it returns the zipped array.

The zipArrays function is called, passing array1 and array2 as arguments. The zipped result is assigned to zippedResult.

The zipped array (zippedResult) containing pairs of elements from both arrays is logged to the console.

Solution 2: Zip Arrays Using map() Method

Here is a single line code to zip two arrays.

// Step 1: Define two arrays to be zipped 
const array1 = [1, 2, 3, 4]; 
const array2 = ['a', 'b', 'c', 'd']; 

// Step 2: Use Array.prototype.map() to zip the arrays 
const zResult = array1.map((element, index) => [element, array2[index]]); 

// Step 3: Display the result 
console.log('Zipped Array:', zResult); 

//Output: Zipped Array: [ [ 1, 'a' ], [ 2, 'b' ], [ 3, 'c' ], [ 4, 'd' ] ]

Here, two arrays are created: array1 contains numeric elements [1, 2, 3, 4], and array2 contains string elements ['a', 'b', 'c', 'd'].

The map() method iterates through array1 and executes a function for each element.
For each iteration, it creates an array containing the current element from array1 (element) and the element from array2 corresponding to the same index (array2[index]).
It then combines these elements into subarrays and assigns them to zResult.

The zipped array (zResult) containing pairs of elements from both arrays is logged to the console.

Both above methods assume that the arrays have the same length for proper zipping. If the lengths differ, it might result in unexpected behavior or errors.

Following examples show how to zip arrays of different lengths.

Solution 3: Zip Arrays of Different Length Using Array.from()

// Step 1: Define two arrays to be zipped 
const array1 = [1, 2, 3]; 
const array2 = ['a', 'b', 'c', 'd']; 

// Step 2: Use Array.from() to zip the arrays 
const zipArray = (arr1, arr2) => Array.from(Array(Math.max(arr2.length, arr1.length)),
 (_, i) => [arr1[i], arr2[i]]);

// Step 3: Display the result 
console.log( zipArray(array1, array2) );

//Output: [[1, "a"], [2, "b"], [3, "c"], [undefined, "d"]]

Here, two arrays (array1 and array2) are defined. array1 contains three numeric elements [1, 2, 3], while array2 contains four string elements ['a', 'b', 'c', 'd'].

The zipArray function takes in two arrays (arr1 and arr2) as parameters.

Math.max(arr2.length, arr1.length) calculates the maximum length between arr1 and arr2 (in this case, arr2 has a greater length).
Array.from() creates a new array based on the maximum length obtained earlier. It uses a mapping function to construct pairs of elements from the two input arrays.
The mapping function (_, i) => [arr1[i], arr2[i]] combines corresponding elements from both arrays at the same index (i) into subarrays.

The zipArray function is called with array1 and array2 as arguments, and the zipped result is logged to the console. The output shows pairs of elements from both arrays combined into subarrays. As array1 has a smaller length than array2, the final pair [undefined, "d"] includes undefined for the missing element from array1.

Solution 4: Zip Arrays of Different Length Using fill() and map() Methods

// Step 1: Define two arrays to be zipped 
const array1 = [1, 2, 3]; 
const array2 = ['a', 'b', 'c', 'd']; 

// Step 2: Use Array.prototype.fill() and Array.prototype.map() to zip the arrays 
const zArray = (array1, array2) => Array(Math.max(array2.length, array1.length))
.fill().map((_,i) => [array1[i], array2[i]]);

// Step 3: Display the result 
console.log(zArray(array1, array2));

//Output: [[1, "a"], [2, "b"], [3, "c"], [undefined, "d"]]

Here, two arrays (array1 and array2) are defined. array1 contains three numeric elements [1, 2, 3], while array2 contains four string elements ['a', 'b', 'c', 'd'].

The zArray function takes in two arrays (array1 and array2) as parameters.

Math.max(array2.length, array1.length) calculates the maximum length between array1 and array2.
Array(Math.max(array2.length, array1.length)).fill() creates an empty array with a length equal to the maximum length obtained earlier.
map((_, i) => [array1[i], array2[i]]) iterates through the created empty array and, at each index i, constructs pairs of elements from array1 and array2 into subarrays.

The zArray function is called with array1 and array2 as arguments, and the zipped result is logged to the console. The output shows pairs of elements from both arrays combined into subarrays. Since array1 has a smaller length than array2, the final pair [undefined, "d"] includes undefined for the missing element from array1.

Solution 5: Zip Two Dimensional (2D) Arrays Using Loop


// Step 1: Define 2d array to be zipped 
const array1 = [[1,4,7],[2,5,8],[3,6,9]];

// Step 2: Create a function to zip the arrays 
const zipArray = (arr) =>{
  return arr[0].map((value, index) => {
      let result = [];
      // Loop through the arrays
      for(let i=0; i <= arr.length-1 ; i++){
          result[i] = arr[i][index]
      }
      return result;
  });
}

// Step 3: Display the result 
console.log(zipArray(array1));

//Output: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]

Here, array1 is a 2D array containing three sub-arrays, each with three elements.

zipArray is a function that takes an array arr as an argument.
It uses the map() method on the first sub-array (arr[0]) to iterate through its elements.
For each element in the first sub-array, it creates a result array and then loops through each sub-array in the 2D array.
During each iteration, it accesses the element at the corresponding index in each sub-array and stores it in the result array.
The map() function returns a new array containing the result arrays for each index.

The zipArray function is called, passing array1 as an argument. The zipped result is logged to the console.

Solution 6: Zip Multiple Arrays Using fill() and map()

// Step 1: Define multiple arrays to be zipped
const array1 = [1,4,7];
const array2 = [2,5,8];
const array3 = [3,6,9];

// Step 2: Ceate function to zip the arrays
const zipArray = (...nArr) => Array(Math.max(...nArr.map(a => a.length)))
.fill().map((_,i) => nArr.map(a => a[i]));  

// Step 3: Display the result
console.log(zipArray(array1,array2,array3)); 

//Output: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]

Three arrays, array1, array2, and array3, each containing three elements. You can define or use multiple arrays with less or more elements.

zipArray is a function that uses the rest parameter ...nArr to accept an arbitrary number of arrays.
It calculates the maximum length among all input arrays using Math.max(...nArr.map(a => a.length)).
It then creates an array filled with undefined elements using Array().fill().
The map() method is used to iterate over the array of undefined elements.
For each index i, it maps the elements of input arrays at that index by using nArr.map(a => a[i]), creating a new array with elements at the same index from each input array.

The zipArray function is called with array1, array2, and array3 as arguments. The zipped result is logged to the console.

You can modify these examples according to your specific use case by replacing the sample arrays (array1 and array2) with your own arrays.
These examples provide a basic idea of how to zip arrays in JavaScript. Depending on the complexity and requirements of your project, you might need to adjust the code to suit your needs.

Arrays in JavaScript are one of the fundamental concepts of computer programming. To learn more about JavaScript Array, have a look at our Free JavaScript Course.