String concatenation in JavaScript

There are two ways of doing string concatenation in JavaScript. This post demonstrates them and explains which one is faster.

+ operator

The + operator does string concatenation as soon as one of its operands is a string. Then the other operand is converted to string. Example:

> "Say hello " + 7 + " times fast!"
’Say hello 7 times fast!’

Alternatively, you can use += where

a += b

is an abbreviation for

a = a + b

Example:

> var str = "";
> str += "Say hello ";
’Say hello ’
> str += 7;
’Say hello 7’
> str += " times fast!";
’Say hello 7 times fast!’

Joining an array of strings

Collect the strings to be concatenated in an array and join it afterwards.

> var arr = [];
> arr.push("Say hello ");
1
> arr.push(7);
2
> arr.push(" times fast");
3
> arr.join("")
’Say hello 7 times fast’

Which one is faster?

Strings being immutable, most string operations whose results are strings produce new strings. Therefore languages such as C# or Java whose string handling is similar to JavaScript’s have special classes that help with concatenating strings. For example, C# calls this class StringBuilder. However, modern JavaScript engines optimize the + operator internally [1]. Tom Schuster mentions Ropes [2] as one possible technique for optimization. Hence there is no need for StringBuilder in JavaScript. Just use += and be done.

References

1. “Re: String concatenation” – email by Brendan Eich stating that + is faster on modern JavaScript engines.
2. “Ropes: an Alternative to Strings (1995)” by Hans-J. Boehm , Russ Atkinson , Michael Plass.