Exercise 2 of 10 · Variables
Name Tag
What you will make
A bordered name-tag card carrying your own name on three of its lines, all three fed by a single value you wrote once at the top.
The one new idea: const gives a value a name you can use again
Real programs mention the same value over and over — a name, a price, a filename. Giving it one name means you change it in one place instead of hunting down every line, and const says out loud that this particular value is not meant to move.
Go straight to the code ↓What const does
A program that mentions the same value in three places gives you three chances to get it wrong. Naming the value once removes two of them.
This line makes a name:
const name = "Sam";Read it as an instruction rather than a statement of fact: take the value on the right, and from here on let
the word name stand for it. Anywhere you write name after that, JavaScript hands the value straight back.
const is the word that makes the name. It is short for constant, and it means what it says — the name is
tied to that one value for the rest of the program, and a later line trying to give it a different value is
refused rather than obeyed. That sounds like a restriction. In practice it is the opposite: most values in
real code were never meant to change, and saying so means the language catches your slip instead of quietly
running with it. JavaScript does have a second word, let, for the few values that genuinely have to change
as a program runs, and it gets an exercise of its own further along. Until then, const is the one to reach
for.
One detail decides everything here: the quotes.
console.log("name")shows the four letters n, a, m, e. Quotes mean this exact text.console.log(name)shows whatever is stored under that name. No quotes means go and look this up.
A worked example
A different program, so the answer to this exercise stays yours to write:
const team = "Falcons";
console.log("Match day");
console.log("Playing at home:", team);
console.log("Come on the", team);Match day
Playing at home: Falcons
Come on the FalconsThe word Falcons is typed once, on the first line, and turns up twice below without being typed again. Change
that first line to const team = "Swifts"; and both of the lines beneath it follow. They never need editing
themselves, because they only ever ask what team is holding.
Notice the comma. console.log is happy to take more than one thing at a time: separate them with a comma
and JavaScript shows them in order with a single space between. That is why console.log("Come on the", team)
comes out as one tidy line rather than two.
Notice the semicolons too. JavaScript marks the end of a statement with one, and every statement above ends in exactly one.
Your turn
The editor already prints a name-tag card: a dashed border, a heading, and three lines that each ask for the same value. Press Run before changing anything, and the card appears with the placeholder still sitting in it.
Now find the short line near the top:
const name = "YOUR NAME";Replace YOUR NAME with your own name, keep the quotes and the semicolon where they are, and press Run
again.
Three lines of the card change at once, because all three ask that one name for its value. You edited a single line and the whole card followed.
Try it a second time with a nickname. That is the entire idea behind naming a value, and it is worth feeling rather than only reading.
If something goes wrong
The most common slip is quoting the name by accident. If a line reads console.log(" Signed:", "name"),
your card is signed by somebody called name — the quotes turned it into ordinary text instead of a lookup.
The other is dropping the quotes off your value, as in const name = Sam;. JavaScript then treats Sam as
another name to go and look up, finds nothing declared under it, and stops with
ReferenceError: Sam is not defined. That message always means the same thing: you asked for a name that was
never given a value.
Neither one is damage. Put the quotes back where they belong and run it again.
Write your code
Runs in your browser. Press Run (or Ctrl/Cmd+Enter) and the output is checked for you.
Press Esc then Tab to move keyboard focus out of the code editor.
Output will appear here after you run your code.The runtime is starting in the background. You can type now — it will be ready before you are.
The answer appears here once you have run your code at least once.
Things that often go wrong here
- Putting quotes around name in the printing lines
- Quotes mean plain text, so the card shows the four letters n-a-m-e instead of the value you stored. Only the value at the top of the program wears quotes.
- Taking the quotes off the value
- Written as const name = Sam, JavaScript reads Sam as another name to look up, finds nothing declared under it, and stops with ReferenceError: Sam is not defined.
- Giving the same name a second value further down
- A name made with const keeps the value it was given, so a later line such as name = "Ana" stops the program with TypeError: Assignment to constant variable. Values that genuinely change are declared with let instead, and that arrives in its own exercise later.
- Spelling the name differently in one of the printing lines, such as Name instead of name
- JavaScript matches names letter for letter, capitals included, so Name and name are two unrelated things, and a printing line asking for Name — which was never declared — stops with ReferenceError: Name is not defined.
Want a blank editor instead? Open the JavaScript playground.