String concatenation in JavaScript

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

1. + 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!’

2. 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.