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
3or4.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:
The two pieces are glued together exactly as written, and the result is one value:
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:
The middle piece is text containing a single space, and now the two words are separated:
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:
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:
Programmers call this joining concatenation; "joining" says it just as well, and it is the word we will use.
Joining Text and a Stored Value
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 looks up customerName, joins the three pieces in order, and prints the single piece of text that results:
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.
Where Did the Spaces Go?
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:
Every piece is present and in the right order, but the output reads badly:
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:
Now the sentence reads the way a sentence should:
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.
One Symbol, Two Jobs
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.
The Full Program
Here is the whole lesson in one file:
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:
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.
Conclusion and Next Steps
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!
