Programs, values, and types · Lesson 4 of 77 · concept
Text values, a first look
About 45 minutes.
By the end of this lesson you can
- Write text with double quotes, single quotes and backticks, and choose between them.
- Build one piece of text out of several using + and using a template literal.
- Explain what length counts, and why a newline counts as one.
- Say why a string method never changes the text you called it on.
Text is a value, exactly like a number is
Explanation
A piece of text is a value your program can hold, pass around, compare and name, in exactly the same way as the number 7. The technical word for it is a STRING, because it is a string of characters threaded one after another in order. You will see that word everywhere, so it is worth adopting now.
Quotation marks are how you tell JavaScript where the text starts and stops. They are punctuation for the machine, not part of the value: the text written as "cat" is three characters long, not five. This is why a number and text that looks like a number are different values — 7 and "7" are as different as a coin and a photograph of a coin, and the last lesson of this module is about what happens when you mix them up.
Three ways to write text, and when each earns its keep
Explanation
Double quotes and single quotes do exactly the same thing. Pick one and stay with it — most codebases pick double quotes and let a formatter enforce it, which is what this project does. The only reason to reach for the other is to avoid an escape: if your text contains an apostrophe, wrapping it in double quotes is easier to read.
The third way is the backtick, and it is not merely a third flavour of quote. Text written between backticks is called a TEMPLATE LITERAL, and inside it you can write a hole of the form ${ } with any expression inside the braces. The expression is worked out and its value is dropped into the text at that spot.
Before template literals, the only way to build text out of pieces was to join them with + — a technique called CONCATENATION, which still works and which you will read in plenty of code. Compare the two side by side in the worked example: the plus-sign version drowns in quotation marks as soon as there is more than one hole, and hidden in that noise is where the missing space usually lives.
Length, and what actually counts as one character
Explanation
Every string knows how long it is: write .length after it and you get a number. Note there are no brackets — length is a property the string already has, not a question you ask it.
Some characters are written with two keystrokes but are one character in the value. A newline is written \n — a backslash followed by an n — and counts as a single character, because the backslash is an ESCAPE: it says the next character has a special meaning rather than its usual one. That is also how you put a double quote inside double-quoted text: \" means a literal quote mark rather than the end of the string.
Strictly, .length counts UTF-16 code units rather than the symbols a human sees. For ordinary text these are the same thing. For emoji and some scripts they are not, and a single visible emoji can report a length of two. That has a lesson of its own in the module on text; for now, just know that the surprise exists and has a cause.
A string method never changes the string
A mental model
Strings are IMMUTABLE: once a piece of text exists it cannot be altered. Every method that appears to change one — toUpperCase, trim, replace, slice — leaves the original exactly as it was and hands you a brand new string instead.
The mental model that makes this stick: a string is printed, not written in pencil. You cannot rub out a letter. You can photocopy it with a change applied, and now you have two pieces of paper.
So the value of a string method is entirely in what it returns. Calling name.toUpperCase() on its own line accomplishes nothing whatsoever — you made a shouty copy and dropped it on the floor. You must catch the result: give it a name, print it, or use it in a bigger expression. This one habit prevents an entire category of bug that beginners can stare at for an hour.
The three that catch everyone
A common mistake
Forgetting the spaces. When you join pieces with +, nothing is added for you: "Hello," + name gives Hello,Ada. The space has to be inside one of the quoted pieces, and it is invisible, which is why this bug survives three readings.
Calling a method and throwing the answer away. Writing title.trim(); as a statement of its own is legal, does something, and changes nothing you can observe. Assign the result or use it.
Using .length() with brackets. length is a property, so it is written without them. Methods like toUpperCase() need the brackets because you are asking the string to do something; length is just a fact the string already carries.
Why so much of programming turns out to be text
Why it matters
Almost everything a program receives from the outside world arrives as text: what a user typed, what a file contains, what another computer sent back. Almost everything a program shows leaves as text too. The interesting work happens on values in between, and the work of getting in and out of that middle is text handling.
That is why a whole module of this course is devoted to text later on, and why the very common bug of doing arithmetic on a number that is secretly text gets a lesson of its own at the end of this one.
Recap
Recap
A string is a value made of characters in order; quotes mark its boundaries and are not part of it. Double and single quotes are interchangeable, backticks add ${ } holes. .length is a property, not a method. Escapes such as \n are one character. Strings are immutable, so a method's whole value is in what it returns.
Worked examples
Every output below was produced by actually running the code in the same sandbox your exercises run in — it is not a prediction.
The same sentence, built two ways
Concatenation with + and a template literal with backticks produce an identical value. Read both, then notice how much of the first line is punctuation.
1const name = "Ada";2console.log("Hello, " + name + "!");3console.log(`Hello, ${name}!`);4console.log(name.length);5console.log(name.toUpperCase());6console.log(name);- line 2
Three pieces joined by +. The space after the comma is inside the first quoted piece — nothing puts it there for you.
- line 3
Backticks, with a hole written ${name}. Everything outside the hole is literal text, including the space, so it is far harder to lose.
- line 4
A property, not a method: no brackets. Ada is three characters.
- line 5
Produces a NEW string in capitals and prints it. The original is untouched.
- line 6
Proof of the previous note: name is still exactly what it was.
What it prints
Hello, Ada!Hello, Ada!3ADAAda
Quotes inside quotes, and a newline that counts as one character
How to put an awkward character inside text, and proof that an escape sequence is a single character in the value even though you typed two.
1console.log("She said \"hi\" and left.");2console.log('An apostrophe is easier this way: it\'s fine.');3const twoLines = "line one\nline two";4console.log(twoLines.length);- line 1
Backslash before each inner quote says: this is a quote character, not the end of the string. The backslashes are not part of the value.
- line 2
The same trick inside single quotes. Choosing the other quote style around the whole text would have avoided the escape entirely.
- line 3
\n is one character: a newline. Printed, this value would occupy two lines on screen.
- line 4
8 characters, then the single newline, then 8 more: 17. If \n counted as two, this would say 18.
What it prints
She said "hi" and left.An apostrophe is easier this way: it's fine.17
Check yourself
Not scored, not stored. Getting one wrong is the useful part.
Two lines print the same variable, one of them after calling a method on it. What appears?
const word = "cat";console.log(word.toUpperCase());console.log(word);
Given const name = "Ada"; which expression produces exactly the text Hello, Ada! ?
How long is the text written as "a\nb" — an a, a backslash-n, and a b?
Write it yourself
Exercise · core · 4 tests
Clean up a messy title
rawTitle arrived from somewhere careless and has spaces at both ends. Declare title, the same text with the outer spaces removed using trim(); shoutedTitle, that trimmed title in capitals; and titleLength, the number of characters in the trimmed title.
title is the text the quiet machine with no spaces at either end, shoutedTitle is THE QUIET MACHINE, and titleLength is 17. rawTitle itself must still hold its original spaces afterwards — trim returns a new string rather than editing the old one.
Define title, shoutedTitle and titleLength at the top level of your code — the tests call them by name.
Worth remembering
- What does it mean that strings are immutable?
A string can never be changed once made. Methods like toUpperCase and trim return a new string and leave the original alone, so you must keep the value they hand back.
- What do backticks give you that quotes do not?
A template literal: text with ${expression} holes that are worked out and dropped in. It keeps spaces and punctuation visible instead of hiding them between plus signs.
Check this lesson against the source
We wrote the explanation; we did not invent the facts. This is the page that backs them.
Check there: The description: strings are immutable, string methods return new strings, and length counts UTF-16 code units.
Check there: That ${expression} placeholders inside backticks are evaluated and substituted.
Check there: That trim() returns a new string and does not modify the original.
Prefer to read the source in a structured breakdown? Turn this doc into a breakdown