JavaScript Equivalent of Python's Zip Function

In this article, we will learn the JavaScript equivalent of Python's zip Function In Python, the zip() function is a convenient way to combine multiple tables into a single iterable of tuples. However, JavaScript does not have a built-in equivalent for this functionality

Problem Statement

Given two or more arrays of equal length, implement a function in JavaScript that combines these arrays into a single variety of arrays, where each inner array contains the elements from the input arrays at the corresponding positions.

Input

arr1 = [1, 2, 3], arr2 = ['a', 'b', 'c']

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

Using forEach method

The forEach() method in JavaScript allows us to execute a provided function once for each element in the array. To implement the zip function using forEach, we will iterate over the arrays and their elements to construct the final zipped array.

Following are the steps of Python's zip function using forEach method ?

• The outer forEach iterates through each array.
  
• The inner forEach iterates through each element in each array.
  
• The result is used to build the zipped array, combining elements from all arrays at the same index.

const zipped = [];
arr.forEach((element, ind) => {}

Example

Below is an example of Python's zip function using the for loop ?

const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];
const array3 = [4, 5, 6];

const zip = (...arr) => {
    const zipped = [];
    arr.forEach((element, ind) => {
        element.forEach((el, index) => {
            if (!zipped[index]) {
                zipped[index] = [];
            }
            if (!zipped[index][ind]) {
                zipped[index][ind] = [];
            }
            zipped[index][ind] = el || '';
        });
    });
    return zipped;
};

console.log(zip(array1, array2, array3));

Output

[ [ 1, 'a', 4 ], [ 2, 'b', 5 ], [ 3, 'c', 6 ] ]

Time Complexity: O(n*m), where n is the number of arrays and mm is the length of the arrays.
Space Complexity: O(n * m), as we create a result array that stores m elements from n input arrays.

Using for loop and Map method

In this approach, we use a for loop to iterate over the indices of the input arrays. We then use the map() method to extract the corresponding elements from each array at the current index and push the grouped array into the result.

Iterates through indices of the arrays using a for loop?

for (let i = 0; i < length; i++) {}

Uses the map method to extract elements at index i from all arrays and stores them in group?

const group = arrays.map(array => array[i]);

Adds the group array to the result array using the push method?

result.push(group);

Example

Below is an example of Python's zip function using reduce() method ?

function zip(...arrays) {
    const length = arrays[0].length;
    const result = [];
    for (let i = 0; i < length; i++) {
        const group = arrays.map(array => array[i]);
        result.push(group);
    }
    return result;
}

// Example Usage
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
console.log(zip(arr1, arr2));

Output

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

Time Complexity: O(n*m), where n is the number of arrays and m is the length of the arrays.
Space Complexity: O(n*m), for the resulting array.

Comparison Table