Is it faster to concatenate a string or an array in JavaScript?

Question

Which is faster?

var str = '';
for(var i=0; i<1000; i++) {
    str += i;
}

or

var arr = [];
for(var i=0; i<1000; i++) {
    arr.push(i);
}
var str = arr.join('');

I ask because I have written a CSS parser which works really well, but is very slow for larger stylesheets (understandably). I am trying to find ways of making it faster, I wondered if this would make a difference. Thanks in advance!

What happened when you tried it? Did it behave the same in other browsers? Did you use realistic data in the testing? — Andrew Morton, Apr 27 '16 at 12:37
Have you tested it? Execute these codes like 100000 times (not `i < 100000`, but actual repeat function), mark times. — Justinas, Apr 27 '16 at 12:37
Please check same question http://stackoverflow.com/questions/7299010/why-is-string-concatenation-faster-than-array-join — Oleg Kaplya, Apr 27 '16 at 12:38
It would be so simple to run those 2 bits of code in the console, with a timestamp before and after each one, and a minus sign between them. Press F12 and it'll take you a couple of minutes to get your answer. — Reinstate Monica Cellio, Apr 27 '16 at 12:43

score 0 · Answer 1 · answered Apr 27 '16 at 12:43

0

console.time('a')
var str = '';
for(var i=0; i<10000; i++) {
    str += i;
}
console.timeEnd('a')

VM474:6 a: 1.940ms

console.time('a')
var arr = [];
for(var i=0; i<10000; i++) {
    arr.push(i);
}
var str = arr.join('');
console.timeEnd('a')

VM476:7 a: 2.542ms

answered Apr 27 '16 at 12:43

Foker

944
2
9
22

The performance is actually much worse than this since while in string concat test in each for loop you create a valid string with s += i; in array push and join test you just push in the loop and make one join operation after the loop at the end. If you couple the push and join in the loop then the results will be dramatic like 2,500,000 ops vs 6,000 op/s. – Redu Apr 28 '16 at 10:20

score 0 · Answer 2 · edited May 23 '17 at 12:23

It is faster to do string concatenation (this thread explains why) which can be proved by this simple test

function f1() {
  var str = '';
  for (var i = 0; i < 1000; i++) {
    str += i;
  }
}

function f2() {
  var arr = [];
  for (var i = 0; i < 1000; i++) {
    arr.push(i);
  }
  var str = arr.join('');
}


var startTime = new Date();
for (var counter = 0; counter < 10000; counter++) {
  f1()
}
var endTime = new Date();
alert("String-concate Time Diff = " + (endTime - startTime));


var startTime = new Date();
for (var counter = 0; counter < 10000; counter++) {
  f2()
}
var endTime = new Date();
alert("Array join Time Diff = " + (endTime - startTime));

As you can see string-concatenation takes 1/3rd of the time taken by Array-join.

Redu · Answer 3 · 2016-04-27T13:55:26.450

I did some benchmarking as follows. It seems the length of the string is important here especially for the Array.prototype.join() operation. Unless essential shouldn't be used for string concatenation.

String concat:

var t = 0,
    p = 0,
    s = "",
    i = 0;
while (t<=1000) {
 p = performance.now();
 s +=i;
 t += performance.now()-p;
 i++;
}
document.write("<pre> Done " + i + " string concat op/s</pre>");

Array.push() + Array.join()

var t = 0,
p = 0,
a = [],
s = "",
i = 0;
while (t<=1000) {
p = performance.now();
a.push(i)
s = a.join("")
t += performance.now()-p;
i++;
}
document.write("<pre> Done " + i + " Array.push() + Array.join() op/s</pre>");

Is it faster to concatenate a string or an array in JavaScript?

3 Answers3