How to Zip Two Arrays in JavaScript?

In web development, the zipped file plays a crucial role. It takes less space and can be transformed to the other website more quickly and easily than the separate file. Furthermore, if you have a lot of data in different arrays and want to combine them, you can zip them. JavaScript provides the facility to zip all arrays in a single file which takes a small amount of space.

This post will explain the various methods to zip two arrays in JavaScript.

How to Zip Two Arrays in JavaScript?

To zip two arrays in JavaScript, the below-listed methods can be used:

Using “map()” Method
Using “Array.from()” Method
Using “Array.prototype.fill()” Method

Let’s check out these methods one by one.

Method 1: Zip Two Arrays Using “map()” Method

To zip two arrays in JavaScript, the “map()” method can be utilized. It takes a call-back function, maps the elements with each other and zips them. Try out the below example for a profound understanding.

Example
In the stated example, two arrays with various elements are defined and stored in the variable “a” and “b”:

var a = [1,2,3];
var b = ["21", "25", "38"];

Invoke the map function which takes the call back function that will call the elements of “a” array. Then, map with the elements of the “b” array:

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

Lastly, invoke the “console.log()” method and pass the variable where zipped arrays are stored to print them on the console:

console.log(c);

As a result, the two arrays “a” and “b” are zipped successfully:

Method 2: Zip Two Arrays Using Array.from() Method

In this stated method, an arrow function is used to pass the arrays. Then, invoke the “Array.from()” method to zip the arrays. Check out the below example for detailed understanding.

Example
First of all, we have defined two arrays with the name “a” and “b”:

var a = [1,2,3];
var b = ["21", "25", "38"];

Now, pass these arrays in an arrow function. Which will first match the length of the array and then map all the elements of both arrays:

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

Display the elements on the console with the help of “console.log()” method and invoke the “zip” function as the argument of this method:

console.log(zip(a,b));

Note: if any element is found missing, the stated map will return an undefined value.

Method 3: Zip Two Arrays Using “Array.prototype.fill() Method

This method is similar to the array.from() method.

Example
Consider the given example for a profound understanding:

var a = [1,2,3];
var b = ["21", "25", "38"];
const zip = (a, b) => Array(Math.max(a.length, b.length)).fill().map((_,i) => [a[i], b[i]]);
console.log(zip(a,b));

Given arrays have been successfully zipped, as demonstrated in the following snippet:

You have learned various methods to zip two arrays in JavaScript.

Conclusion

To zip two different arrays in JavaScript, the “map()”, “Array.from()”, and “Array.prototype.fill()” can be invoked. In the “map()” method, define two different arrays, invoke the map method to call the first array elements and map them with the second array’s elements. This tutorial has stated the method to zip two different arrays in JavaScript.

How to Zip Two Arrays in JavaScript?