JavaScript string join vs concatenation

README.md

For a long time, I have assumed that joining strings ([line1, line2].join('')), was faster than concatenating (line1 + line2).

Suddenly it hit me, that I actually didn't know if it was true.

So I created this test, which basically CRUSHES that assumption!

This is apparently an old fact, that has just stuck with me.

According to Craig Buckler the assumption is valid in IE7! So if you are writing code for IE7, keep telling yourself to join ;-)

--

This is my results with node.js:

join 2 lines: 684ms
concatenate 2 lines: 19ms
append by joining 2 lines: 2249ms
append by concatenating 2 lines: 0ms
join 20 lines: 4242ms
concatenate 20 lines: 15ms
append by joining 20 lines: 44820ms
append by concatenating 20 lines: 3ms

This is my results with Safari:

join 2 lines: 17152.062ms
concatenate 2 lines: 10281.947ms
append by joining 2 lines: 7837.884ms
append by concatenating 2 lines: 9.366ms
join 20 lines: 56863.238ms
concatenate 20 lines: 38719.806ms
append by joining 20 lines: 150392.822ms
append by concatenating 20 lines: 46.907ms

join-vs-concatenate.js

var line1 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line2 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line3 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line4 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line5 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line6 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line7 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line8 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line9 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line10 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line11 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line12 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line13 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line14 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line15 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line16 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line17 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line18 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';
var line19 = 'dsjh dashjg djhsag dhjsag dhjasg djhsag dhjs agdhjs gahjdsgjh';
var line20 = 'nmewbd mmdn ebwmndbewmndb emndb ewmndbew mndb emnwbd emnwbd meb';

var tests = 10000;

console.time('join 2 lines');
for(var i=0 ; i < 1000*tests ; i++) {
  var newLine = [line1, line2].join('');
}
console.timeEnd('join 2 lines');

console.time('concatenate 2 lines');
for(var i=0 ; i < 1000*tests ; i++) {
  var newLine = line1 + line2;
}
console.timeEnd('concatenate 2 lines');

var curLine = '';
console.time('append by joining 2 lines');
for(var i=0 ; i < tests ; i++) {
  curLine = [curLine, line1, line2].join('');
}
console.timeEnd('append by joining 2 lines');

var curLine = '';
console.time('append by concatenating 2 lines');
for(var i=0 ; i < tests ; i++) {
  curLine += line1 + line2;
}
console.timeEnd('append by concatenating 2 lines');


console.time('join 20 lines');
for(var i=0 ; i < 1000 * tests ; i++) {
  var newLine = [line1, line2, line3, line4, line5, line6, line7, line8, line9, line10, line11, line12, line13, line14, line15, line16, line17, line18, line19, line20].join('');
}
console.timeEnd('join 20 lines');

console.time('concatenate 20 lines');
for(var i=0 ; i < 1000 *tests ; i++) {
  var newLine = line1 + line2 + line3 + line4 + line5 + line6 + line7 + line8 + line9 + line10 + line11 + line12 + line13 + line14 + line15 + line16 + line17 + line18 + line19 + line20;
}
console.timeEnd('concatenate 20 lines');

var curLine = '';
console.time('append by joining 20 lines');
for(var i=0 ; i < tests ; i++) {
  curLine = [curLine, line1, line2, line3, line4, line5, line6, line7, line8, line9, line10, line11, line12, line13, line14, line15, line16, line17, line18, line19, line20].join('');
}
console.timeEnd('append by joining 20 lines');

var curLine = '';
console.time('append by concatenating 20 lines');
for(var i=0 ; i < tests ; i++) {
  curLine += line1 + line2 + line3 + line4 + line5 + line6 + line7 + line8 + line9 + line10 + line11 + line12 + line13 + line14 + line15 + line16 + line17 + line18 + line19 + line20;
}
console.timeEnd('append by concatenating 20 lines');