Joining Text with +

Introduction

Welcome back to Storing and Calculating with JavaScript Values! In the previous lesson we used + to add numbers together. In this lesson we discover that the very same + has a second job - and it is one we will use constantly. So far, whenever we wanted a message to include a stored value, we put a comma between the pieces inside console.log, and JavaScript slotted a space between them. That is quick, but it gives us no say over the spacing: we cannot put a name in the middle of a sentence and then follow it immediately with an exclamation mark. To build sentences of our own, we need to join text together ourselves. In this lesson, we will learn how to: Join two pieces of text into one with + . Join fixed text to a stored value to build a sentence. Put the spaces and punctuation exactly where we want them. Tell apart the two kinds of value we have met so far, text and numbers. By the end, we will have a program that greets a customer by name and describes their order in a full, properly spaced sentence.

Two Kinds of Value

Before we start joining, let's name what we are joining. Every value we have stored or printed so far has been one of two kinds: Text : characters wrapped in quotation marks, such as "Alex" or "Corner Cafe" . The quotation marks are not part of the value; they only mark where it starts and ends. Numbers : written plainly, such as 3 or 4.5, with no quotation marks. Which kind a value is decides what JavaScript will do with it. Last lesson, + sat between two numbers and added them. In this lesson, + sits between two pieces of text, and it does something different.

Joining Two Pieces of Text

When both sides of a + are text, JavaScript does not add - it joins the two pieces into one longer piece of text, end to end: JavaScript console.log("Corner" + "Cafe"); The two pieces are glued together exactly as written, and the result is one value: text CornerCafe Notice what did not happen: JavaScript did not put a space between them. When we joined with commas inside console.log, the space came free. With +, nothing is added that we did not write. If we want a space, the space has to be part of one of the pieces: JavaScript console.log("Corner" + " " + "Cafe"); The middle piece is text containing a single space, and now the two words are separated: text Corner Cafe The space does not have to be a piece of its own. There are three common ways to write it, and all three are used in practice: JavaScript console.log("Corner " + "Cafe"); console.log("Corner" + " " + "Cafe"); console.log("Corner" + " Cafe"); The first puts a trailing space at the end of the left piece, the second keeps the space as a dedicated piece of its own, and the third puts a leading space at the start of the right piece. JavaScript joins whatever characters it is given, so all three print the same line: text Corner Cafe Corner Cafe Corner Cafe Programmers call this joining concatenation; "joining" says it just as well, and it is the word we will use.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Joining becomes useful when one of the pieces is a variable. Here is a greeting built from a fixed opening, a stored name, and a fixed ending:

JavaScript

const customerName = "Alex";
console.log("Welcome, " + customerName + "!");

const customerName = "Alex";
console.log("Welcome, " + customerName + "!");

JavaScript looks up customerName, joins the three pieces in order, and prints the single piece of text that results:

text

Welcome, Alex!

Welcome, Alex!

Look closely at the first piece, "Welcome, ". It ends with a space, inside the quotation marks, so that the name does not run into the comma. And the exclamation mark follows the name immediately, with no space, because the third piece begins with it. We control every character.

This is exactly what the comma could not do. Compare console.log("Welcome,", customerName, "!");, which prints Welcome, Alex ! - printing separate values this way always puts a space between them, so this form cannot place the exclamation mark right after the name. Commas are still handy for a quick label and a value; for a proper sentence, we join.

The most common slip when joining text is forgetting that the spaces are our job. Here is a sentence built from two stored values and a piece of fixed text between them:

JavaScript

const customerName = "Alex";
const drinkName = "caramel latte";

console.log(customerName + "ordered a" + drinkName);

const customerName = "Alex";
const drinkName = "caramel latte";

console.log(customerName + "ordered a" + drinkName);

Every piece is present and in the right order, but the output reads badly:

text

Alexordered acaramel latte

Alexordered acaramel latte

Nothing is wrong as far as JavaScript is concerned - it joined exactly what we gave it. The pieces simply have no spaces at their edges. The fix is to put a space at the start and the end of the middle piece, and while we are there, to finish the sentence with a full stop:

JavaScript

console.log(customerName + " ordered a " + drinkName + ".");

console.log(customerName + " ordered a " + drinkName + ".");

Now the sentence reads the way a sentence should:

text

Alex ordered a caramel latte.

Alex ordered a caramel latte.

A good habit when writing a join: read the pieces aloud in order, and at every +, ask whether a space belongs there. If it does, it has to be inside one of the quotation marks.

We now know that + between two numbers adds them, and + between two pieces of text joins them. JavaScript decides which job to do by looking at the kinds of value on either side. That raises an obvious question: what happens when one side is text and the other is a number? The answer is interesting enough to deserve its own lesson, and it is waiting for us in the next course. Until then, we keep our joins to text and our sums to numbers, and everything behaves as we expect.

Here is the whole lesson in one file:

JavaScript

const customerName = "Alex";
const drinkName = "caramel latte";

// + joins two pieces of text into one
console.log("Welcome, " + customerName + "!");

// Spaces and punctuation have to be part of the text being joined
console.log(customerName + "ordered a" + drinkName);
console.log(customerName + " ordered a " + drinkName + ".");

const customerName = "Alex";
const drinkName = "caramel latte";

// + joins two pieces of text into one
console.log("Welcome, " + customerName + "!");

// Spaces and punctuation have to be part of the text being joined
console.log(customerName + "ordered a" + drinkName);
console.log(customerName + " ordered a " + drinkName + ".");

When we click Run, we get a greeting, then the cramped sentence, then the corrected one, so we can see the difference the spaces make:

text

Welcome, Alex!
Alexordered acaramel latte
Alex ordered a caramel latte.

Welcome, Alex!
Alexordered acaramel latte
Alex ordered a caramel latte.

The second and third lines are built from the same two variables. Only the fixed text between them changed - two spaces and a full stop - and that is the difference between output that looks broken and output that looks right.

Nicely done! In this lesson, we learned that + joins two pieces of text into one when both sides are text, that a stored value can be joined to fixed text to build a sentence, and that JavaScript adds nothing we did not write - every space and every full stop has to be inside one of the pieces. We named the two kinds of value we have been using all along, text and numbers, and saw that + does a different job for each.

Next come the practice tasks: joining names, repairing a sentence whose words have collided, and describing a whole order in one line. Let's go and build some sentences!

Introduction

Two Kinds of Value

Joining Two Pieces of Text

Join the 1M+ learners on CodeSignal

Joining Text and a Stored Value

Where Did the Spaces Go?

One Symbol, Two Jobs

The Full Program

Conclusion and Next Steps