References and Mutation

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Primitive value

A simple value like a number, string, boolean, null or undefined. It is copied when assigned and can't be changed in place.

Reference

The "address" a variable holds for an object, telling the engine where the object is in memory.

Heap

The area of memory where objects live.

Mutation

Changing an existing object in place, like setting a property or pushing to an array.

Identity

Whether two references point at the very same object. === checks identity for objects.

Object.freeze

Locks an object so its properties can't be added, removed or changed (one level deep).

Strict mode

A stricter version of JavaScript (on in modules and classes, or with "use strict") that turns silent failures into errors.

Deep copy

A copy where nested objects are copied too, so nothing is shared with the original.

Immutable update

Making a new object with the change instead of changing the old one.

1. 1

   Copy before changing

   In the first example, change const p2 = p1; to const p2 = { ...p1 };. Predict the second, third and last lines.

2. 2

   Freeze deeply

   In the third example, wrap the inner object too: limits: Object.freeze({ perMinute: 60 }). Predict the first two lines.

3. 3

   Clone a Map

   In the fourth example, add tags: new Map([["a", 1]]) to order and log deep.tags. Predict what structuredClone gives you.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   Primitive values (numbers, strings, booleans, null, undefined, bigints, symbols) are copied when you assign them: let b = a gives b its own copy. They are also immutable: you can't change the number 5 or the string "hi" in place, only make new values. Objects (including arrays and functions) live in a part of memory called the heap, and a variable holds a reference to the object, meaning where to find it.

2. 2

   So const p2 = p1 copies the reference, not the object. Both names now point at one object, and a change through either name (mutation: changing an object in place, like p2.score = 10 or arr.push(1)) is visible through both. The same happens when you pass an object to a function: the function receives the reference and can mutate the caller's object. (Strictly, JavaScript passes everything by value; for objects, that value is the reference. Reassigning the parameter inside the function doesn't affect the caller.)

3. 3

   === on objects compares identity: "is this the same object?", not "do they look the same?". { a: 1 } === { a: 1 } is false (two objects), while p1 === p2 is true when both point at one object. To compare contents you check the properties yourself (for flat objects, compare keys and values), or use a library function. JSON.stringify(a) === JSON.stringify(b) works only for simple data with keys in the same order.

4. 4

   const doesn't stop mutation: it only stops the variable from pointing somewhere else. To lock the object itself, use **Object.freeze(obj): no adding, deleting or changing properties. In normal ("sloppy") scripts, an attempt to change a frozen object fails silently; in strict mode** (modules, classes, or code under "use strict") it throws a TypeError. Freeze is shallow: nested objects stay changeable unless you freeze them too. Softer locks exist: Object.seal (no adding or deleting, changing allowed) and Object.preventExtensions (no adding).

5. 5

   A shallow copy ({ ...obj }, Object.assign({}, obj), [...arr]) duplicates only the top level. A deep copy duplicates everything inside too. The browser's built-in **structuredClone(value)** makes deep copies and handles Date, Map, Set, nested arrays and even circular references; it throws for functions and DOM nodes. JSON.parse(JSON.stringify(x)) is an older trick that loses dates, undefined, Map and more (Topic 6.6). Phase 5.10 covers the same ideas for arrays.

6. 6

   An immutable update means: never change the existing object; build a new one with the change. const next = { ...state, count: state.count + 1 }. For nested data, copy every level along the path you change and share the rest: { ...state, user: { ...state.user, name: "Ravi" } }. Frameworks such as React rely on this: they detect changes by comparing references (old !== new), which is instant, instead of comparing every property. Mutating in place keeps the same reference, so the change can go unnoticed.

• ↔

  Mutation is fast and uses no extra memory, but shared objects can change behind your back; immutable updates are safer and easy to compare, but create more objects for the garbage collector.

• ↔

  structuredClone is a correct deep copy for data, but it's slower than a targeted spread of the parts you change and loses class identity; copy only what you need.

• ↔

  Object.freeze catches accidental writes, but silently in sloppy scripts; it's most useful together with strict mode (modules) or in development builds.

• I can explain the difference between a value and a reference with a picture.

• I can predict when a change through one variable shows through another.

• I know === compares objects by identity.

• I can freeze an object and know freeze is shallow and silent outside strict mode.

• I can choose between spread and structuredClone for copying.

• I can write an immutable update for nested data.