Is String.concat slower than Array approach to join strings

Question

Strings in JavaScript are immutable. Across the web and here on Stack Overflow as well, I came across the Array approach to concatenate strings:

var a = []; 

a.push(arg1,arg,2....);
console.log(a.join(''));

I know that this approach is better than the simple

console.log(arg1 + arg2 +.....);

for reasons of skipping creating intermediate objects but how does it fair better against :

arg1.concat(arg2,arg3.....);

If you already looked at stackoverflow.com/questions/51185/…, how can you assume that calling Array.join is always better? There are a bunch of tests on that post that prove that it's faster in IE, and FF. For WebKit, stick to concatenation. — Ruan Mendes
– Ruan Mendes, Commented Jun 29, 2011 at 18:37

Daniel Vassallo · Accepted Answer · 2010-04-24 06:07:43Z

3

For what it may count, I tried the following test:

var stringA = 'someStringA';
var stringB = 'someStringB';
var stringC = 'someStringC';

var arr = [];
arr.push(stringA);
arr.push(stringB);
arr.push(stringC);

// Testing the concat method
i = 0;
console.time('10k concat');
while (i < 10000) {
    stringA.concat(stringB, stringC);
    i++;
}
console.timeEnd('10k concat');

// Testing the join method
i = 0;
console.time('10k join');
while (i < 10000) {
    arr.join(''); 
    i++;
}
console.timeEnd('10k join');

Results in Firefox 3.6.3 on Mac OS X 10.6.2:

10k concat: 20ms
10k join: 15ms

10k concat: 20ms
10k join: 16ms

10k concat: 19ms
10k join: 15ms

Results in Chrome 5.0 on Mac OS X 10.6.2:

10k concat: 22ms
10k join: 14ms

10k concat: 20ms
10k join: 16ms

10k concat: 20ms
10k join: 16ms

UPDATE:

If we were to count the array creation in the join('') test, we would see a different story. Testing:

var stringA = 'someStringA';
var stringB = 'someStringB';
var stringC = 'someStringC';

// Testing the concat method
i = 0;
console.time('10k concat');
while (i < 10000) {
    stringA.concat(stringB, stringC);
    i++;
}
console.timeEnd('10k concat');

// Testing the join method
i = 0;
console.time('10k join');
while (i < 10000) {
    var arr = [];
    arr.push(stringA);
    arr.push(stringB);
    arr.push(stringC);
    arr.join(''); 
    i++;
}
console.timeEnd('10k join');

Results in Firefox 3.6.3 on Mac OS X 10.6.2:

10k concat: 20ms
10k join: 40ms

10k concat: 21ms
10k join: 40ms

10k concat: 20ms
10k join: 42ms

Results in Chrome 5.0 on Mac OS X 10.6.2:

10k concat: 20ms
10k join: 55ms

10k concat: 22ms
10k join: 60ms

10k concat: 19ms
10k join: 60ms

edited Apr 24, 2010 at 6:07

answered Apr 24, 2010 at 5:56

Daniel Vassallo

346k72 gold badges513 silver badges447 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wikser Over a year ago

Shouldn't you count the array creation too as it wouldn't be needed when using concat only? Either way, for those 4ms in 10k concats I'd not use some weird array joining (in most cases).

Daniel Vassallo Over a year ago

@Wikser: Added that test as well. Now you have even more reasons to avoid weird joining :)

Jeff Meatball Yang · Accepted Answer · 2010-04-24 06:10:42Z

1

Your question asserts that using an array .join is faster than plain string concatenation. The short answer is: only in IE is this true.

Other browsers have optimized the + operator such that using arrays or other methods is counter-productive.

answered Apr 24, 2010 at 6:10

Jeff Meatball Yang

39.2k27 gold badges94 silver badges125 bronze badges

Collectives™ on Stack Overflow

Is String.concat slower than Array approach to join strings

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related