I tested various array concatenation techniques not because it actually matters to my code but merely as an aside, to see where we are right now. As expected the very new ES 2015 spread operator is beaten by the old concat() method on JavaScript arrays by a considerable margin.

However, what surprised me a bit was when I pared these two:

var a = b = c = [1,2,3,4,5];

// SLOWER (V8 and Edge, very slightly faster in Firefox)
console.time('t1');
for (i = 0; i < 1000000; i++) {
  Array.prototype.concat(a, b, c);
};
console.timeEnd('t1')

// FASTER (V8 and Edge, very slightly slower in Firefox)
console.time('t2');
for (i = 0; i < 1000000; i++) {
  [].concat(a, b, c);
};
console.timeEnd('t2')

I tested various array concatenation techniques not because it actually matters to my code but merely as an aside, to see where we are right now. As expected the very new ES 2015 spread operator is beaten by the old concat() method on JavaScript arrays by a considerable margin.

However, what surprised me a bit was when I pared these two:

var a = b = c = [1,2,3,4,5];

// SLOWER (V8 and Edge, very slightly faster in Firefox)
console.time('t1');
for (i = 0; i < 1000000; i++) {
  Array.prototype.concat(a, b, c);
};
console.timeEnd('t1')

// FASTER (V8 and Edge, very slightly slower in Firefox)
console.time('t2');
for (i = 0; i < 1000000; i++) {
  [].concat(a, b, c);
};
console.timeEnd('t2')

I tested, and ran multiple times before doing the next one, on the latest Node.js, Chrome and Edge browsers. With V8 (Node.js, Chrome) the result is even bigger, but even for Edge the first option is always clearly - on V8 significantly - slower than the second option. In Firefox results are reversed but almost equal, so let's limit the question to the other two browser engines (V8 and Chakra).

So I'm asking merely out of curiosity, since I did not foresee this at all,

1) Apart from performance, is there any practical difference between the two ways to concatenate those arrays?

2) Why is the one that AFAICS creates one object (array) less than the other (the initial array) slower?

I know the methods are the same, that's why I tested the direct access to the method on the prototype instead of creating an (unused) array object to access it. I also know that it's browser dependent, which is a) why I tested two V8 based systems (Chrome and Node.js) and the Microsoft Edge browser, and b) why I included the runnable test case above.

• javascript
• performance

• 4 Array.prototype.concat and [].concat is the same thing, so most likely your testing is faulty. – adeneo Commented Sep 15, 2016 at 13:08
• You can run my test, which is why I included it. What would be faulty? Please tell me! – Mörre Commented Sep 15, 2016 at 13:09
• 1 Did you try swapping them, and running the last first instead etc. – adeneo Commented Sep 15, 2016 at 13:09
• 1 Array.prototype.concat(a, b, c) and [].concat(a, b, c) aren't the same functionally - they are the same function sure, but the 2nd one has the context of an instance. – Daniel A. White Commented Sep 15, 2016 at 13:10
• 1 Is just an idea, Array.prototype.concat and [].concat are the same, we know that, buy may be when executing, the piler all ready knows what [] is instead of going through Array.prototype, as I say is an idea, because I also suppose the piler change [] for Array.prototype... – DIEGO CARRASCAL Commented Sep 15, 2016 at 13:13

2 Answers 2

Array.prototype.concat needs to be resolved in every loop. If you would lookup the function only once, you'll see different results. This may vary depending on the implementation of the runtime though.

var a = b = c = [1,2,3,4,5];

// Array.prototype.concat
console.time('t1');
var apc = Array.prototype.concat;
for (i = 0; i < 1000000; i++) {
  apc.call([], a, b, c);
};
console.timeEnd('t1')

// [].concat
console.time('t2');
for (i = 0; i < 1000000; i++) {
  [].concat(a, b, c);
};
console.timeEnd('t2')

// They're the same:
console.log(Array.prototype.concat === [].concat);

To get more accurate results, use a proper benchmarking library (eliminates warm up time for example).

The accepted answer is inaccurate. In Chromium the code below shows that the difference in execution is not related to outside lookups, but to the context, i.e. this inside concat(). (In Firefox, the advantage of [].concat() is marginal and not even consistent.)

In the [].concat() case the context is an empty array, whose elements will be included in the concatenation result. With Array.prototype.concat() the context is Array.prototype, which is also an array, also “empty” in the “array-sense”, but full with methods... I’m not sure why this makes such a difference.

Update: I was playing around with a custom made array: one with many non-number members, i.e. length === 0. It took twice the time pared to the empty array, but still not as slow as Array.prototype...

const a = b = c = [1,2,3,4,5];

const ap = Array.prototype;
const apc = Array.prototype.concat;
const array = [];

function loopAndLog(msg, context) {
  console.time(msg);
  for (let i = 0; i < 1000000; i++) {
    apc.call(context, a, b, c);
  };
  console.timeEnd(msg)
}

loopAndLog('[].concat() equivalent first round', array);
loopAndLog('Array.prototype.concat() equivalent first round', ap);
loopAndLog('[].concat() equivalent second round', array);
loopAndLog('Array.prototype.concat() equivalent second round', ap);