4.6 — Primitives vs references

Earlier this phase you caught JavaScript doing something suspicious: scores was declared with const, yet scores[1] = 96 worked. Then objects did it too. Today the mystery resolves — and the answer is the single most important fact in this phase, the one behind the #1 source of real-world JavaScript bugs.

Here it is: a variable's slot never holds an object — it holds a reference to where the object lives (you'll see it drawn as an arrow). Numbers and strings sit in the slot; objects and arrays live elsewhere, in a region of memory called the heap, and the slot only points at them.

Every "spooky action at a distance" bug you will ever debug — two variables mysteriously changing together — is this one picture.

watch it happen

let score = 10;
let backup = score;
backup = 99;
console.log(score);

const cat = { name: "Biscuit", age: 3 };
const alias = cat;
alias.age = 4;
console.log(cat.age);

Act one: primitives. score holds 10 — a number is a primitive, small enough to sit right in the slot. Line 2 copies it: backup gets its OWN 10. Two slots, two separate values. This is everything you learned in 1.3, unchanged.

under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

One rule runs this whole lesson: copying a slot copies what the slot holds. Primitives (numbers, strings, booleans, null, undefined) sit directly in the slot, so copies are independent.

The “stack” in this lesson’s diagram is the very same stack that held your call frames back in lesson 3.9 — same structure, one slot per variable. This lesson just looks closer at what’s actually sitting inside each slot: a value, or an arrow.

Objects and arrays live in the heap, and slots hold only their reference. So =, function arguments, even push-ing an object into an array — all copy arrows, never the object.

Technically JavaScript is always call by value — it's just that for objects, the value being copied is the reference. That's why the polite name is call by sharing: caller and function share one object. Mutating through the parameter reaches it; reassigning the parameter only re-points the local copy.

And === on two references asks one question: same arrow? — which is why two variables naming one object are ===, and why {} === {} is false (two objects, two addresses — lesson 4.7 runs with this).

Fun fact: you already use both models daily. Emailing someone a Word attachment is a primitive copy — they edit their copy, yours never changes. Sending a Google Docs link is a reference copy — one document, and their edits appear in "your" file, because it was never your file. Every aliasing bug is a Google-Docs link someone mistook for an attachment.

your turn

⌨️ one player, two names

A scoreboard bug hunt, in reverse: build the situation where two variables and a function parameter all reach ONE object — and prove it with an identity check.

requirements:

Create an object alice with name = "Alice" and score = 10.
Create sameAlice so that it points at the same object — no new object may be built.
Write a function addPoints(player, points) that increases the player's score by points — computed from the current score.
Call addPoints passing sameAlice and 5. Then print alice.score, and print alice === sameAlice.

when you press RUN, the console must show exactly:

true

✏️ Quick check 1

Type exactly what this prints:

const team = ["Ana", "Ben"];
const squad = team;
squad.push("Cara");
console.log(team.length);

✏️ Quick check 2

Type exactly what this prints:

let gold = 50;
let silver = gold;
silver = silver + 10;
console.log(gold);

✏️ Quick check 3

Type exactly what this prints:

function rename(user) {
  user.name = "Zoe";
}

const u = { name: "Mia" };
rename(u);
console.log(u.name);

✏️ Quick check 4

Type exactly what this prints:

function reset(box) {
  box = { count: 0 };
}

const counter = { count: 7 };
reset(counter);
console.log(counter.count);

teach it back

🗣️ Now teach it back

The interview classic — a friend shows you: const a = { n: 1 }; const b = a; b.n = 2; and is horrified that a.n is now 2. Explain what b = a really copied, why const didn’t prevent any of it, and what a function could and couldn’t do if they passed a to it.

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this

to remember

Slots hold primitives directly, but only REFERENCES (arrows) to objects/arrays — the objects themselves live in the heap.

Copying a slot copies what it holds: primitives → independent copies; objects → two arrows, ONE object (aliasing).

const locks the arrow, never the object’s contents. Functions get a copy of the arrow: they can MUTATE what you pass, never re-point your variable.

next: 4.7 Copying & equality →