If you want to learn different ways to merge one or more arrays in JavaScript. Please go through this article to learn how to do it with related usages and differences.
An array is a collection of elements or items. We use arrays to store data as elements and retrieve them back when we need them. The array is a data structure widely used in many programming languages, and JavaScript is not an exception.
To merge one or more arrays to combine all the elements from the multiple arrays into a single array. We should implement this when we have data coming from various streams, and we want to combine or merge them into one data structure.
In this article, we will learn some of the ways to merge arrays in JavaScript. We will also conclude which is the best way among all and when should we use each.
In this blog we will cover the following topics:
Contents
1. Using the for loop
2. Using the Spread operator
3. Using the Concat() array method
4. Using the push() array method
Alright, let's get started.
1. The traditional way of merging using the for loop
Using the for loop to merge two or more array elements may be the most viable way. Most of us are aware of how to use for-loops in programming. So it is the easiest option to start with. However, it may not be the best solution for the problem at hand.
To merge elements from one array to another array, we must first iterate through all elements in the array. In the loop, we will retrieve each element from an array and insert(using the array push() method) to another array.
Below is a JavaScript function doing the same,
const mergeArrays = (one, two) => {
for(let i=0; i<two.length; i++) {
one.push(two[i]);
}
return one;Now, we can call the mergeTwoArrays() function and pass two arrays as the arguments for merging.
mergeArrays([10,20,30], [40,50,60]);As expected, below is the output of the merged array,
[10, 20, 30, 40, 50, 60]Alright, but how do we merge more than two arrays using the same merge() function? Well, it may not be a very friendly way but, we can do something like this,
mergeArrays(mergeArrays([10,20,30], [40,50,60]), [70,80,90]);So here, we first merge two arrays and merge the output of it with another array.
[10, 20, 30, 40, 50, 60, 70, 80, 90]As you can guess, as our requirement of the number of input arrays grows for merge, it will be a lesser friendly way to manage it. So, using the for-loop to merge two or more arrays is fine, to begin with, but may not be an excellent method to use in practice
2. Merge Using the Spread operator
Since ES6, we can able use the ... (yes, three consecutive dots) as a spread operator to destructure the arrays. We can use the spread operator on arrays within an array literal([]) to merge them into a single array. Let's see it with an example.
First, we will take two arrays, arr1 and arr2. Then we will merge the arrays using the spread operator(...) within an array literal.
const arr1 = [10,20,30];
const arr2 = [40,50,60];
// Merge arrays
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [10,20,30,40,50,60]
console.log(arr1); // [10,20,30]
console.log(arr2); // [40,50,60]Now, notice the output of the merge. The arrays arr1 and arr2 are merged, and their elements are combined into a new array. Please note, the input arrays are not changed here.
Ok, so how do we merge more than two arrays using this method? It's easy, pass as many arrays you want to merge as comma-separated.
const arr1 = [10,20,30];
const arr2 = [40,50,60];
const arr3 = [70,80,90];
// Merge arrays
const merged = [...arr1, ...arr2, ...arr3];
console.log(merged); // [10,20,30,40,50,60,70,80,90]This way of merging arrays is much convenient than using the traditional for-loop approach we have seen before. It is a go-to way to merge arrays in JavaScript except for a tiny gotcha that we will see in a while!
3. Merge using the Concat() array method
JavaScript Array object has several practical methods. One of them is the Concat() method. The main usage of the Concat method is to merge two arrays.
const arr1 = [10,20,30];
const arr2 = [40,50,60];
// Merge arrays
const mergedArray = arr1.concat(arr2);
console.log(mergedArray); // [10,20,30,40,50,60]
console.log(arr1); // [10,20,30]
console.log(arr2); // [40,50,60]In the above code, we merge two arrays using the Concat() method. However, it is not my favorite syntax in merging arrays. We may misinterpret The syntax arr1.concat(arr2) as we are merging arr2's element into arr1 and changing the array1 array itself. That's not the fact, though.
Like we used the spread operator, the Concat method will not change the input arrays. Rather, it creates a new array merging all the input arrays and returns it. So, a better way of writing the Concat() method to merge arrays is,
const merged = [].concat(arr1, arr2);Here, it is clear that we can Concat multiple arrays to an empty array and return the merged array as a result. You can pass as many arrays as input arguments to the Concat() method.
Great, but which one to use? The spread operator or the Concat() method?
If you are sure the inputs are all arrays, please use the spread operator. It is a very straightforward and modern way to merge arrays. But if you are unsure about the input element type, use the Concat() method.
For example, let's take a string tapas and use the spread operator on it with the array literals,
[...'abcde']What do you think the output will be? The string abcde will be destructured into an array of characters it is made of,
The output,
['a','b','c','d','e']So, when you merge it with other arrays, the final result may not be the one you were expecting,
const arr = [10,20,30];
const name = 'abcde';
const merged = [...arr, ...name];
console.log(merged);The output,
[10, 20, 30, 'a','b','c','d','e']In such cases, use the Concat() method instead,
const arr = [10,20,30];
const name = 'abcde';
const merged = [].concat(arr, name);
console.log(merged);The output,
[10, 20, 30, 'abcde']4. Merge using the push() array method
We use the push() method to insert an element at the end of the array. We can use this method to merge two or more arrays as well. Please take a look,
const arr1 = [10,20,30];
const arr2 = [40,50,60];
// Merge arrays
const mergedArray = arr1.push(...arr2);
console.log(mergedArray); // 6
console.log(arr1); // [10,20,30,40,50,60]
console.log(arr2); // [40,50,60]A few important points to note here,
The push() method inserts an element into an array. The method changes the array and returns the number of elements of the array after insertion. So, in the example above, the first array, arr1, will be changed to accommodate the new elements. The return value is 6 from the push() method is assigned to the merged variable.
We must spread the array while pushing its element to the other array, arr1.push(...arr2). Missing the spread operator will insert the entire array to the other array,
const arr1 = [10,20,30];
const arr2 = [40,50,60];
// Merging without the ... on arr2
const mergedArray = arr1.push(arr2);
console.log(mergedArray); // 4
console.log(arr1); // [10,20,30,[40,50,60]]
console.log(arr2); // [40,50,60]So, how do we merge more than two arrays using the push() method? Here it is,
const arr1 = [10,20,30];
const arr2 = [40,50,60];
const arr3 = [70,80,90];
// Merge more than two arrays
arr1.push(...[...arr2, ...arr3]); // [10,20,30,40,50,60,70,80,90]Summary
There are more than a couple of ways to merge two or more arrays into one in JavaScript.
Using the spread operator or the Concat() method is the most optimal solution.
If you are sure that all inputs to merge are arrays, use the spread operator. In case you are unsure, use the Concat() method.
You can use the push() method to merge arrays when you want to change one of the input arrays to merge.
0 Comments