Array concatenation is the process of combining 2 or more arrays into a single array. This process is useful in many situations, especially when you have data spread across multiple arrays; you can concatenate them to create a single array that contains all the data to make your code more concise and readable.
This straightforward, example-based article will walk you through a couple of different ways to concatenate arrays in modern JavaScript. Without any further ado, let’s get our hands dirty by writing some code.
Using the spread operator
The spread operator allows you to expand an array into individual elements. You can use it to merge an arbitrary number of arrays at once.
Example:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [4, 5, 6];
const mergedArr = [...arr1, ...arr2, ...arr3];
console.log(mergedArr);Output:
[
1, 2, 3, 4, 5,
6, 4, 5, 6
]Using the concat() method
The concat() method creates a new array by merging (concatenating) 2 or more arrays.
Example:
const arr1 = ['sling', 'academy', 'dot', 'com'];
const arr2 = ['hello', 'world'];
const arr3 = ['foo', 'bar', 'baz'];
const mergedArr = arr1.concat(arr2, arr3);
console.log(mergedArr);Output:
[
'sling', 'academy',
'dot', 'com',
'hello', 'world',
'foo', 'bar',
'baz'
]Using the push() method
You can also use the push() method to append the elements of one array to another. The example below uses the push() method with the spread operator:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1);Output:
[ 1, 2, 3, 4, 5, 6 ]This example uses the push() method with a classic for loop:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
for (let i = 0; i < arr1.length; i++) {
arr1.push(arr2[i]);
}
console.log(arr1);The result is the same.
Using the spread operator or the push() method with a loop may be faster than using the concat() method for large arrays. However, with small and medium arrays, differences are not significant and difficult to identify. So, just go with the approach you like best.
Using the splice() method
The splice() method allows you to add elements to an array at a specific index. You can make use of it for the purpose of array concatenation, as shown below:
const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
arr1.splice(arr1.length, 0, ...arr2);
console.log(arr1);Output:
[ 'a', 'b', 'c', 'd', 'e', 'f' ]Using the unshift() and pop() methods
We can use a while loop with the unshift() and the pop() methods to pop each element from one array and unshift it to another array. This approach looks weird, and it overcomplicates the problem more than necessary. However, I will still add it to this article for your reference.
Example:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
while (arr2.length > 0) {
const x = arr2.pop();
arr1.unshift(x);
}
console.log(arr1);Output:
[ 4, 5, 6, 1, 2, 3 ]Conclusion
Knowing more than one way to achieve a goal is good because you will have more choices and also understand JavaScript better. Have a nice day & happy coding!
