How to Create Zip Array in JavaScript ?

Working with arrays in JavaScript often requires merging or combining multiple arrays into a single structure. One common operation in array manipulation is known as "zipping," where corresponding elements from multiple arrays are paired together to create a new array.

Example:

Input: 
let a = [1, 2, 3]
let b = [a, b, c]
Output: [[1, a], [2, b], [3, c]]

These are the following approaches:

Using a Loop

This approach involves iterating over the arrays simultaneously using a loop and pushing paired elements into a new array.

Example: In this example, we define a function zipArrays that takes two arrays arr1 and arr2 as arguments. We initialize an empty array result to store the zipped elements. Then, we iterate over the arrays using a loop, pushing paired elements [arr1[i], arr2[i]] into the result array. Finally, the zipped array is returned.

function zipArrays(arr1, arr2) {
    let result = [];
    for (let i = 0; i < Math.min(arr1.length,
                    arr2.length); i++) {
        result.push([arr1[i], arr2[i]]);
    }
    return result;
}

const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];
const zippedArray = zipArrays(array1, 
                            array2);
console.log(zippedArray);

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

Using map() Function

This approach utilizes the map() function to pair elements from arrays and return a new array. we will see the example in which we have used the map() function to create zip array.

Syntax

function zipArrays(arr1, arr2) {
    return arr1.map((element, index) => [element, arr2[index]]);
}

Example: In this example, we define a function zipArrays that takes two arrays arr1 and arr2 as arguments. We use the map() function on arr1 to iterate over its elements. Inside the map() callback function, we pair each element of arr1 with the corresponding element from arr2 using the index. This creates an array of arrays where each inner array contains a pair of elements from arr1 and arr2.

function zipArrays(arr1, arr2) {
    return arr1.map((element, index) =>
                [element, arr2[index]]);
}

const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];
const zippedArray = zipArrays(array1, array2);
console.log(zippedArray); 

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

Using Array.prototype.reduce()

In this approach, we use the reduce() method to iterate through the arrays and accumulate the paired elements into a new array. This method is particularly useful for more complex transformations and can handle arrays of different lengths by truncating the longer one.

Example: This example demonstrates how to use the reduce() method to zip two arrays.

function zipArrays(arr1, arr2) {
    return arr1.reduce((acc, curr, index) => {
        if (index < arr2.length) {
            acc.push([curr, arr2[index]]);
        }
        return acc;
    }, []);
}


let a = [1, 2, 3];
let b = ['a', 'b', 'c'];
let result = zipArrays(a, b);
console.log(result);

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