3 Ways to Concatenate Strings in JavaScript

Jul 29, 2019

There are 3 ways to concatenate strings in JavaScript. In this tutorial, you'll the different ways and the tradeoffs between them.

The + Operator

The same + operator you use for adding two numbers can be used to concatenate two strings.

const str = 'Hello' + ' ' + 'World';
str; // 'Hello World'

You can also use +=, where a += b is a shorthand for a = a + b.

let str = 'Hello';
str += ' ';
str += 'World';
str; // 'Hello World'

If the left hand side of the + operator is a string, JavaScript will coerce the right hand side to a string. That means it is safe to concatenate objects, numbers, null, and undefined.

let str = 'Values: ';
str += 42;
str += ' ';

str += {};
str += ' ';

str += null;

str; // 'Values: 42 [object Object] null'

The + and += operators are fast on modern JavaScript engines, so no need to worry about something like Java's StringBuilder class.

Array#join()

The Array#join() function creates a new string from concatenating all elements in an array. For example:

['Hello', ' ', 'World'].join(''); // 'Hello World'

The first parameter to join() is called the separator. By default, the separator is a single comma ','.

['a', 'b', 'c'].join(); // 'a,b,c'

You can pass in any separator you want. Separators make Array#join() the preferred choice for concatenating strings if you find yourself repeating the same character over and over again. For example, you can use ' ' as the separator to join an array of words:

// 'Twas the night before Christmas'
['Twas', 'the', 'night', 'before', 'Christmas'].join(' ');

Or you can use '/' to join together URL fragments:

// 'masteringjs.io/tutorials/fundamentals/string-concat'
['masteringjs.io', 'tutorials', 'fundamentals', 'string-concat'].join('/');

Separators make Array#join() a very flexible way to concatenate strings. If you want to join together a variable number of strings, you should generally use join() rather than a for loop with +.

String#concat()

JavaScript strings have a built-in concat() method. The concat() function takes one or more parameters, and returns the modified string. Strings in JavaScript are immutable, so concat() doesn't modify the string in place.

const str1 = 'Hello';
const str2 = str1.concat(' ', 'World');

// 'Hello'. Strings are immutable, so `concat()` does not modify `str1`
str1;
// 'Hello World'
str2;

The downside of using concat() is that you must be certain str1 is a string. You can pass non-string parameters to concat(), but you will get a TypeError if str == null.

// If `str` is null or not a string, can't use `concat()`
const str = 'Values: ';

// 'Values: 42 null'
str.concat(42, ' ', null);

The concat() function is rarely used because it has more error cases than the + operator. For example, you would get unexpected behavior if you call concat() on a value that happens to be an array. You should use + instead of concat() unless you have a very good reason.

If you must use concat(), it is usually best to call it on an empty string:

''.concat('Hello', ' ', 'World');

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials