Just JavaScript· 01
Chapter 01 · Foundations

Mental Models

let a = 10; let b = a; a = 0; — what is b afterward? You already know the answer. The point of this chapter isn't the answer; it's to make you notice the model in your head that produced it.

Lab · step through the model

Walk the three lines, one wire at a time

This is the snippet that opens the course. Step through it and watch the wires move. The live readout at the bottom is what console.log would print at each point.

let a = 10;
let b = a;
a = 0;
console.log(a)—
console.log(b)—
01

What's a mental model?

Every fundamental concept you use — even something as plain as a variable — rides on a web of buried analogies. Sometimes those analogies are wrong.

Read the snippet in the lab a second time, but this time pay attention to the monologue in your head. It probably sounds something like: declare a, set it to 10; declare b, set it to a — wait, what's a again? Oh, 10 — so b is 10; set a to 0; so a is 0 and b is 10.

Notice that even that monologue doesn't capture what's really happening. You said "set b to a" — but what does it mean to set a variable? For most fundamental concepts, there's a set of deep-rooted analogies you've attached to it. Many people first learned variables as boxes you put values into. Even if you no longer picture a box, variables might still behave "boxy" in your imagination.

The boxy trap

These approximations are your mental models. They quietly steer how you read code for your entire career. When one is wrong — a tutorial that traded accuracy for ease, an intuition wrongly transferred from another language — it produces confident, incorrect answers. Just JavaScript exists to find and fix those.

This course replaces "boxes" with wires. It will feel slightly annoying at first — why not just put the value into the variable? — but the wire model is what makes equality, object identity, and mutation all fall out cleanly later. You may as well start getting used to wires now. The lab above already uses them.

02

Coding, fast and slow

We default to the cheap, pattern-matching brain even for code. A wrong mental model makes the expensive brain's work harder than it needs to be.

Kahneman's two systems show up at the keyboard. The fast system pattern-matches from names, comments, and shape — "this duplicates a spreadsheet." The slow system retraces the code step by step. Slow thinking is draining, so we avoid it — which is exactly how bugs slip past.

Read this function in fast mode first, the way you would while busy. Then click Read it slowly.

functionduplicateSpreadsheet(original) {if (original.hasPendingChanges) {throw newError('Save the file before duplicating it.'); }let copy = { created: Date.now(), author: original.author, cells: original.cells, metadata: original.metadata, }; copy.metadata.title = 'Copy of ' + original.metadata.title;return copy;}
✓Duplicates a spreadsheet.
✓Throws if the original isn't saved.
✓Prepends "Copy of" to the new title.
✗…and quietly renames the original spreadsheet too.
The highlighted line mutates copy.metadata — but copy.metadata and original.metadata are wired to the same object (look at metadata: original.metadata above). Changing its title changes it for both. This is the bug at the center of the whole course; by Chapter 08 you'll see it plain as day.

If you missed it, that's the point — you'll get the most from this course. In fast mode we guess from naming and structure; in slow mode we retrace. A correct mental model is what makes slow mode cheap enough to actually use.

Think first

Given only what you know so far, what does this print?

let a = 10;
let b = a;
b = 99;
console.log(a);
Answer · 10

b = a pointed b at the value 10 — not at a. Re-pointing b to 99 moves only b's wire. a's wire never moved, so it still lands on 10. (Run the lab with these numbers in your head to confirm.)

03

Recap

  • You read code through buried mental models — often the "variable as a box" intuition. This course rebuilds them around wires.
  • We default to fast pattern-matching even on code; bugs live in the gap. A correct model makes the slow, step-by-step mode affordable.
  • b = a points b at the valuea currently points at — never at a itself. That single fact explains the opening snippet.
  • The spreadsheet's hidden bug is shared-object mutation — the destination of this whole journey.
◀ Prev—