The (so) Many Ways of Concatenating an Array

The truth behind performance is benchmarks. JavaScript is the type of language in which there are many ways of doing just one simple thing. When you have many ways of doing just 1 thing, it gets complicated; you have to make a choice. And how do you know which way is the fastest? That is what makes JavaScript confusing and complicated.

Have a look at this code:

let array = [1,2,3,4,5,6,7,8];
let second_array = [9,10,11];

How would you concatenate these 2 arrays? In JavaScript there are about 10 ways of concatenating (joining) 2 arrays. Which one would you choose?

Array.prototype.concat:

This is the simplest possible way.

array = array.concat(second_array);

Array.prototype.push:

Again relatively simple, although, a little verbose.

array.push(...second_array);

Array.prototype.reduce:

Just a teeny-tiny bit more complex.

array = second_array.reduce((all, current) => {
   all.push(current);
   return all;
}, array);

For-each:

second_array.forEach(item => array.push(item));

For-of:

for (var item of second_array) {
    array.push(item);
}

For-in:

for (var i in second_array) {
    array.push(second_array[i]);
}

For:

for (var i = 0; i < second_array.length; ++i) {
    array.push(second_array[i]);
}

The Spread-Operator:

A little bit more verbose but still understandable.

array = [...array, ...second_array];

Which way is your go-to when it comes to concatenation? Leave a comment below.

You'd think that JavaScript engines and compilers would be intelligent enough for you to choose any of these ways and be equally fast. You'd be wrong. 100% of time.

Let's Benchmark:

After benchmarking all these methods of array concatenation, here are the results for Google Chrome:

Array.prototype.concat x 6,006,271 ops/sec ±1.51% (61 runs sampled)

Array.prototype.push x 15,125,549 ops/sec ±0.59% (62 runs sampled)

Array.prototype.reduce x 26,952,859 ops/sec ±0.59% (64 runs sampled)

For-each x 26,682,412 ops/sec ±0.46% (64 runs sampled)

For-of x 23,628,346 ops/sec ±0.83% (64 runs sampled)

For-in x 2,951,756 ops/sec ±0.52% (64 runs sampled)

For x 25,458,988 ops/sec ±0.56% (64 runs sampled)

The Spread-Operator x 15,266,695 ops/sec ±0.57% (65 runs sampled)

You can go run and see the results yourself here.

Which should I choose?

You should of course always choose the fastest. But oftentimes, the fastest on one browser is actually slower on the other. In my opinion, your go to method should be the for-loop one. It is the best optimised on almost all the browsers. But if you are targetting NodeJS's V8, go with Array.prototype.reduce or the ForEach method. If great readability is your concern, I'd go with Array.prototype.push or the spread operator.

Why is X method faster than Y?

I don't know very deeply about what happens under-the-hood in each method. Maybe someone with more knowledge can specify? : )

Thanks for reading, hope you learned something.
Have a great day!