How to Create Zip Array in JavaScript ?
Last Updated :
28 Jun, 2024
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.
JavaScript
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);
Output[ [ 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.
JavaScript
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);
Output[ [ 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.
JavaScript
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);
Output[ [ 1, 'a' ], [ 2, 'b' ], [ 3, 'c' ] ]
Similar Reads
How to clone an array in JavaScript ? In JavaScript, cloning an array means creating a new array with the same elements as the original array without modifying the original array.Here are some common use cases for cloning an array:Table of ContentUsing the Array.slice() MethodUsing the spread OperatorUsing the Array.from() MethodUsing t
6 min read
How to Declare an Array in JavaScript? Array in JavaScript are used to store multiple values in a single variable. It can contain any type of data like - numbers, strings, booleans, objects, etc. There are varous ways to declare arrays in JavaScript, but the simplest and common is Array Litral Notations. Using Array Literal NotationThe b
3 min read
How to deep flatten an array in JavaScript? In this article, we will learn how to deep flatten an array in JavaScript. The flattening of an array is a process of merging a group of nested arrays present inside a given array. Deep flattening means that the array would be completely flattened. Example: Input: [1,2,3,4,5,[6,[7,8,9]]] Output: [1,
2 min read
Create an Array of Given Size in JavaScript The basic method to create an array is by using the Array constructor. We can initialize an array of certain length just by passing a single integer argument to the JavaScript array constructor. This will create an array of the given size with undefined values.Syntaxconst arr = new Array( length );J
3 min read
How to create HTML List from JavaScript Array? Creating an HTML list from a JavaScript array allows you to dynamically generate <ul> (unordered) or <ol> (ordered) lists and fill them with data directly from your array. This is useful when you want to display array data in a structured way on your webpage. In this guide, weâll go thro
3 min read
How to Copy Array by Value in JavaScript ? There are various methods to copy array by value in JavaScript.1. Using Spread OperatorThe JavaScript spread operator is a concise and easy metho to copy an array by value. The spread operator allows you to expand an array into individual elements, which can then be used to create a new array.Syntax
4 min read
How to Truncate an Array in JavaScript? Here are the different methods to truncate an array in JavaScript1. Using length PropertyIn Array.length property, you can alter the length of the array. It helps you to decide the length up to which you want the array elements to appear in the output.JavaScriptconst n = [1, 2, 3, 4, 5, 6]; n.length
4 min read
Convert Array to String in JavaScript In JavaScript, converting an array to a string involves combining its elements into a single text output, often separated by a specified delimiter. This is useful for displaying array contents in a readable format or when storing data as a single string. The process can be customized to use differen
7 min read
How to Convert String of Objects to Array in JavaScript ? This article will show you how to convert a string of objects to an array in JavaScript. You have a string representing objects, and you need to convert it into an actual array of objects for further processing. This is a common scenario when dealing with JSON data received from a server or stored i
3 min read
How to Merge/Flatten an array of arrays in JavaScript ? Merging or flattening an array of arrays in JavaScript involves combining multiple nested arrays into a single-level array. This process involves iterating through each nested array and appending its elements to a new array, resulting in a flattened structure.To Merge or flatten array we can use arr
3 min read