Variables and Constants

All in one: var, let and const, every rule and every error, side by side

What this example compares

A name for a value: a typed value 85 vs a variable let marks = 85;
Three words: declare let studentName; vs initialise vs assign again, and = (store) vs === (compare)
Can it change? var vs let vs const (and static, which is not a keyword for this)
Declared without a value: let city; vs var town; vs const pinCode;
The same name twice: var allows it silently, let and const refuse the whole script
Scope: block-scoped let/const vs function-scoped var
Read above its own line (hoisting): undefined for var vs a ReferenceError for let/const
const fixes the name, not the contents: student.marks = 95; and push vs pointing the name elsewhere, and Object.freeze
The four name rules: accepted vs refused names, and marks vs Marks vs MARKS
Naming habits: camelCase vs student_name vs MAX_MARKS vs isPassed vs t
Error messages: TypeError vs ReferenceError vs SyntaxError vs no error at all, and "use strict";
Which keyword? A live cricket scoreboard: const for what stays, let for what changes

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see eleven panels of cards and a scoreboard. Panel 1 shows the typed 85, the variable marks giving 85 and marks + 5 giving 90, and panel 2 shows one box going from undefined to Aman to Meera. Panels 3 to 7 put the three keywords through five tests: a new value, no value at all, a second declaration, use outside its block, and use above its own line. var says yes to all five, let only to the first two, and const to none, and every "no" is a red error message. Panel 8 shows Asha's marks changed inside a const object, panel 9 shows four accepted names, five refused ones and marks, Marks, MARKS holding 85, 70 and 60, and panel 11 shows the error messages, including totl = 90;, which gives no error at all. The scoreboard reads India at Mohali, 0/0, Need 181 to win. The Console prints marks: 85, then one line per card, each starting with its panel number (for example 3. const age = 20; age = 21; -> TypeError: Assignment to constant variable.), and ends with runs: 0 wickets: 0. Press the scoreboard buttons and a new runs: ... wickets: ... line appears for each ball.

Quick check: in panel 5, why does the Console never print Starting, even though console.log("Starting") comes first in that card's code?

Because the second let score is a SyntaxError, and JavaScript finds a SyntaxError while reading the whole script, before it runs any line of it. The script is refused as a whole, so not even its first line runs. A TypeError, such as age = 21; on a const in panel 3, is different: it happens only when that line runs, so every line above it has already run.