Array Concatenation¶
May 25, 2019
Introduction¶
Array concatenation is very common in JavaScript. In this blog, I provide four different approaches to do this and also provide the performance comparison. Suppose we have two simple arrays like:
const a1 = [1, "David", 3];
const a2 = ["Tom", 3, "Jeff"];
Array.concat¶
Arrays in JavaScript have a built-in function concat
. We can use it to combine two or multiple arrays into a single one.
const a = a1.concat(a2);
Spread Operator¶
The spread operator was introduced in ES6. It provides you the ability to expand iterable objects into multiple elements. We can use it to combine multiple arrays into a single array.
const a = [...a1, ...a2];
Looped Insertion¶
May 25, 2019
Use a for-of loop to append each element of the second array to the first array.
const a = a1.slice();
for (const e of a2) {
a.push(e);
}
Functional Reduce¶
We can also use functional reduce to combine two arrays.
const a = a2.reduce((acc, item) => {
acc.push( item );
return acc;
}, a1 );
Performance Comparison¶
I created a test case to test the performance of the above four methods in jsperf.com. Here is the link to the test case.
Observations:
- The latest version of Chrome improve the speed of concatenation dramatically.
Looped Insertion
is the fastest in the latest version of Chrome.- The speed of
Spread Operator
is close to the fastest one.
Remarks¶
Given the speed of Spread Operator
is very close to the fastest and more importantly it has a very consise and easy syntax. I would recommend using spread operator to concatenate arrays.