The String concat() method

The concat() method concatenates the current string with one or more strings passed as arguments, and returns the combined string.

Example:

'Flavio'.concat(' ').concat('Copes') //'Flavio Copes'

You can specify a variable number of arguments, and if you do so all those arguments will be concatenated to the original string:

'Flavio'.concat(' ', 'Copes') //'Flavio Copes'

The original string doesn’t change

concat() returns a new string. It never modifies the one you call it on, because strings in JavaScript are immutable. No string method can change a string in place.

const name = 'Flavio'
const full = name.concat(' Copes')

name //'Flavio'
full //'Flavio Copes'

If you want to keep the result, assign it to a variable, like I did with full here.

What happens with non-string arguments?

If you pass something that’s not a string, concat() converts it to a string first:

'Total: '.concat(42) //'Total: 42'
'Items: '.concat([1, 2, 3]) //'Items: 1,2,3'

The array became 1,2,3 because that’s its string representation. This conversion is silent, so watch what you pass in. An object, for example, turns into [object Object], which is rarely what you want.

Calling concat() with no arguments returns a copy of the string:

'Flavio'.concat() //'Flavio'

Should you use concat()?

In practice, almost never. The + operator does the same job with less noise:

'Flavio' + ' ' + 'Copes' //'Flavio Copes'

And when you mix strings and variables, template literals are clearer still:

const name = 'Flavio'
`Hello ${name}` //'Hello Flavio'

I mostly meet concat() when reading older code. Knowing how it behaves helps you understand that code, but for new code I reach for + or template literals.

One thing to be careful about when you switch to +: it also performs addition. '5' + 3 gives you '53', but 5 + 3 gives you 8. The result depends on the types involved. concat() never has that ambiguity, since it always converts everything to strings.