Two names, one object
Putting p1 into an array also stores a reference, so changing list[0] changes p1.
A variable doesn't hold an object, it holds a reference (an address) to it, so assigning or passing an object shares the same one; === compares those references, Object.freeze locks an object (shallowly), and immutable updates make new objects instead of changing old ones.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write shallowEqual(a, b) that returns true when two flat objects have the same keys and the same values (===). Test it with { x: 1, y: 2 } vs { y: 2, x: 1 } and vs { x: 1 }.
Write deepFreeze(obj) that freezes an object and every nested object inside it. Show that a nested change no longer works.
Given const todo = { id: 1, text: "Read", tags: ["home"] }, make updated, which adds the tag "urgent", without changing todo. Log both tag lists.
Explain it without notes
What is the difference between how primitives and objects are assigned and passed to functions?
Why is { a: 1 } === { a: 1 } false? How would you compare two objects by content?
What does Object.freeze do, and what are its limits?
What is an immutable update and why do UI frameworks rely on it?
When would you use structuredClone instead of spread?
Preview
Console
Nothing logged yet.Expected console output
5 10
10 10
true
false
99