Chapter 1 · Foundations
Values and variables
Step 1 of 22 · Concept
A variable is a named box
By the end of this lesson you can name values and compute with them.
let age = 15;
age = 16;
let age = 15; makes a box named age in the module's frame (lesson 2), and = puts 15 in it. age = 16; puts
a new value in the same box, with no let.
Step 2 of 22 · Concept
const: a box that keeps its value
const makes a box that never gets a new value:
const year = 2026;
year = 2027;
The second line stops the program with this error (lesson 5 reads errors):
TypeError: Assignment to constant variable.
Use const for a value that never changes, and let for one that will.
Step 3 of 22 · Quiz
Which line stops the program?
This program stops with a TypeError. Which line stops it?
let lives = 3;
lives = 2;
const name = "Ada";
name = "Grace";
Step 4 of 22 · Concept
Values come in kinds
Every value has a kind. typeof x gives the kind's name, as text:
| value | kind | typeof gives |
|---|---|---|
15, 2.5 | a number, whole or decimal | "number" |
"Ada" | text | "string" |
true, false | yes or no | "boolean" |
let x;: a box with no value | undefined | "undefined" |
JavaScript has one number type for whole numbers and decimals. null means "no value" too, but you write it on
purpose: let winner = null;. Lessons 11 and 16 meet it.
Step 5 of 22 · Quiz
What kind is it?
What does typeof give for this value?
typeof "15"
Step 6 of 22 · Concept
JavaScript does arithmetic
| operator | does | with 7 and 2 |
|---|---|---|
+ - * | add, subtract, multiply | 7 * 2 is 14 |
/ | divides | 7 / 2 is 3.5 |
% | gives the remainder | 7 % 2 is 1 |
** | raises to a power | 7 ** 2 is 49 |
One number type: 6 / 3 prints 2, with no .0. Math.floor(x) rounds down to a whole number: Math.floor(7 / 2) is 3.
* and / go before + and -, and brackets go first.
Step 7 of 22 · Quiz
Predict the output
Type what this program prints.
const width = 7;
const height = 2;
console.log("Area:", width * height);
console.log("Half:", width / height);
Step 8 of 22 · Demo
See it run
Run it and compare with your answer.
Step 9 of 22 · Concept
Ask Node directly: the REPL
Open the Terminal tab, type node and press Enter. This is the REPL (read, evaluate, print, loop): it reads
a line, works it out, and shows its value.
> 2 ** 10
1024
> let age = 15
undefined
> age + 1
16
> .exit
> is the REPL waiting for you, and .exit leaves it. A let line has no value of its own, so it shows
undefined. A program in main.js shows only what it logs.
Step 10 of 22 · Concept
= puts a new value in the box
score = score + 5 works out the right side first: it reads 10 from the box and adds 5. Then = puts 15 in the
box, in place of the 10.
| shortcut | is short for |
|---|---|
score += 5 | score = score + 5 |
score -= 2 | score = score - 2 |
score *= 3 | score = score * 3 |
score++ | score = score + 1 |
Step 11 of 22 · Trace
Watch the boxes
Two boxes, and a value copied from one to the other. Press Next and watch the boxes.
let score = 10;
let bonus = score;
score = score + 5;
console.log(score, bonus);- Line 1 made the box
score, with10in it. Line 2 is next. let bonus = scoreread10and put a copy in the new boxbonus. Line 3 is next.score + 5is15, and=put it inscoreonly.bonuskeeps its10.- Line 4 printed
15 10. The program is finished.
Step 12 of 22 · Quiz
Which box changed?
After line 3 has run, what is in the box bonus?
let score = 10;
let bonus = score;
score = score + 5;
console.log(score, bonus);Step 13 of 22 · Try it
Try it: add first
Run it: it prints 14, because * goes before +. Add brackets so that the + goes first and it prints 20.
Put the brackets around what must happen first: 2 + 3.
Step 14 of 22 · Demo
The whole program
Run it. Each shortcut puts a new value in the box coins, and each console.log shows it. The last line logs three
kinds.
Step 15 of 22 · Exercise
Your turn: a receipt
Write a receipt for pencils.
- Make
price(4, never changes) andcount(3). - Log the count and the total.
- Add 2 to
countwith+=, then log both again.
The program must print:
3 pencils: 12
5 pencils: 20
price never changes: const. count changes: let. Made with const, count += 2 stops with TypeError: Assignment to constant variable.
Each line logs three values: count, the text "pencils:" and the total, count * price. After count += 2;, the same line again.
console.log(count, "pencils:", count * price);
Step 16 of 22 · Concept
Decimals are close, not exact
console.log(0.1 + 0.2);
0.30000000000000004
A number takes 8 bytes (lesson 2). Most decimals, such as 0.1, have no exact form in those bytes, so JavaScript
keeps the nearest one. Adding two of them can show the difference.
Step 17 of 22 · Concept
Some sums never stop the program
| you write | you get |
|---|---|
1 / 0 | Infinity |
"abc" * 2 | NaN: "not a number" |
Neither is an error. The program goes on with that value, and the next lines use it. A NaN makes every calculation it
is in NaN too.
Lesson 5 shows how to find such mistakes.
Step 18 of 22 · Quiz
Fill in the line
Type the missing line.
console.log(10 / 4);
console.log(10 / 0);
console.log(10 % 4);
console.log(Math.floor(10 / 4));
Step 19 of 22 · Demo
See it run
Run it and compare with your answer. Math.floor(10 / 4) rounds 2.5 down to 2.
Step 20 of 22 · Check yourself
Check yourself: a game score
No shape this time. You know it.
- Make
pointswith250, add a bonus of 30 with+=, and log it. - A level is 100 points: log the whole levels with
Math.floor. - Log the points left over with
%.
The program must print:
Points: 280
Level: 2
Left over: 80
Three console.log lines, each a text and a value. Work out the level and the rest from points after the bonus.
Step 21 of 22 · Challenge · optional
Challenge: a capped bonus
Optional.
A score never goes past 300, bonus or not. Change the program so that it prints:
Ada: 300
Bob: 250
Run it: Ada gets 320. After the bonus, each score must be the smaller of two numbers: itself and 300.
Math.min(a, b) gives the smaller of two numbers: Math.min(320, 300) is 300. Use it in place of each +=.
ada = Math.min(ada + bonus, 300);
Step 22 of 22 · Recap
Recap
letmakes a box and=puts a value in it; aconstbox keeps its value.- One number type:
7 / 2is3.5.%gives the remainder;Math.floorrounds down. +=and++change a box.let bonus = scorecopies the value.typeofnames a value's kind:typeof "15"is"string".0.1 + 0.2is not quite0.3, and1 / 0isInfinity, with no error.
Next: lesson 4 joins text, fills values into it, and turns it into numbers.
Review
5 questions from this lesson, in a new order each time. Answer from memory: 3 of 5 right on the first try passes. On a day after you finish the lesson, a pass earns 15 XP.
The review needs JavaScript.
const width = 7;
const height = 2;
console.log("Area:", width * height);
console.log("Half:", width / height);
console.log(2 + 3 * 4);
let coins = 10;
coins += 5;
console.log("After a gift:", coins);
coins -= 3;
console.log("After a snack:", coins);
coins *= 2;
console.log("Doubled:", coins);
coins++;
console.log("Found one:", coins);
console.log(typeof coins, typeof "10", typeof true);
// 1. make price (4) and count (3)
// 2. log the count and the total
// 3. add 2 to count with +=, then log again
console.log(10 / 4);
console.log(10 / 0);
console.log(10 % 4);
console.log(Math.floor(10 / 4));
// write your program here
const bonus = 50;
let ada = 270;
let bob = 200;
ada += bonus;
bob += bonus;
console.log("Ada:", ada);
console.log("Bob:", bob);