“Concatenation” is the process of joining things together. In JavaScript, concatenation is most commonly used to join variable values together, or strings with other strings, to form longer constructions.

Somewhat confusingly, the most common JavaScript concatenation operator is +, the same as the addition operator. A few examples:

Basic Concatenation

var title = "We wish " + "to be friends";
console.log(title);

Result in the console:

> We wish to be friends

Note the extra space added to the first string; JavaScript won’t automatically add a space when it concatenates. Alternatively, we could do something like this:

var welcome = "Come sit";
var direction = "by the hearth";
console.log(welcome + " " + direction);

> Come sit by the hearth

Concatenating Things to Themselves

It’s not unusual to set a variable to a string, then later want to add another string to the existing content. With the += assignment operator, we can do just that:

var welcome = "Good ";
var time = "evening";
welcome += time;
console.log(welcome);

> Good evening

Note that the value of the welcome variable will be permanently altered by this process.

Different Strokes: concat

The concat method also joins together strings:

var oneDay = "One day I met ";
var riddle = oneDay.concat("a man ","going to St. Ives.");
console.log(riddle);

> One day I met a man going to St. Ives.

Note that the spaces must still be included in the string components in order for them to reflected in the final string result. You could also start a .concat method from nothing, joining new strings to it:

var riddle = "".concat("The man had ", "seven wives");

join

The join method concatenates all the elements of an array into a string. If we have an array cats:

var cats = ['Artemis', 'Catbus', 'Duchess', 'Figaro', 'Kuroneko-sama', 'Scratchy'];
var joinedNames = cats.join();
console.log(joinedNames);

> "Artemis,Catbus,Duchess,Figaro,Kuroneko-sama,Scratchy"

Note that .join automatically joins the elements together the comma separator used in the array itself. That behaviour can be changed to any separator you wish, including spaces:

var joinedNames = cats.join(' ');

> "Artemis Catbus Duchess Figaro Kuroneko-sama Scratchy"

Again, join() is significantly slower than the standard + operator, and should be avoided where possible.

Concatenation Confusions

New JavaScript coders often make a common (and confusing) error with concatenation. A good example is the following:

var a = 10;
var b = 20;
console.log('Total is ' + a + b);

You might expect the result to be 30. Instead, you’ll find:

> Total is 1020

What’s going on? The unexpected result is due to the fact that JavaScript is concatenating the text with the variable rather than adding the variables together first.

It does this because JavaScript executes from left to right by default, meaning that if we could slow JavaScript execution to a crawl, we would see the order of operations as:

> Total is 10
> Total is 1020

We solve the problem by wrapping the parts we want to be added together first in parentheses:

console.log('Total is ' + (a + b));

The result is now what we expect:

> Total is 30

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.