Lesson 2. Objects Are References

Mission link: readonly and const are the two things people believe make data safe, and neither one stops a mutation. Knowing what actually does is the difference between a defensive copy and a false sense of one.
Primary source: You Don't Know JS Yet: Objects & Classes, chapter 1
Prerequisites: Lesson 1

Warm-up

1. ▢ Why is timeout || 30 wrong when 0 is a legal timeout, and what replaces it?

2. ▢ What does typeof null return, and what should you use to identify an array?

Know this

A variable holding an object holds a reference. Assignment copies the reference, so two variables can name one object:

const a = { count: 1 };
const b = a;
b.count = 2;
console.log(a.count);       // 2

Objects are compared by identity, never by contents:

console.log({ a: 1 } === { a: 1 });     // false, two objects
console.log([1] === [1]);               // false

There is no built-in structural equality. Comparing by JSON.stringify is the common shortcut and it is wrong in ways that matter: key order changes the result, undefined values disappear, Date becomes a string, and NaN becomes null.

const is about the binding

const config = { retries: 3 };
config.retries = 5;         // fine
config = { retries: 5 };    // TypeError: Assignment to constant variable

const prevents rebinding the name. It says nothing about the object. That is the same distinction as lesson 1's primitives against objects, seen from the declaration side.

To freeze the object itself, Object.freeze exists and is shallow:

const frozen = Object.freeze({ tags: ["a"] });
frozen.tags.push("b");      // works, the array was never frozen

Spread copies one level

const original = { name: "svc", tags: ["a"] };
const copy = { ...original };
copy.name = "other";            // original.name unchanged
copy.tags.push("b");            // original.tags IS changed

Every convenient copy syntax is shallow: object spread, array spread, Object.assign, Array.prototype.slice, Array.from. For a genuinely independent tree use structuredClone(value), which is built in, handles cycles, and copies Map, Set, Date and typed arrays. It refuses functions and class instances lose their prototype, so it is a data-copying tool rather than an object-copying one.

readonly is a compile-time claim

interface Config { readonly tags: readonly string[] }

function handle(c: Config) {
  c.tags.push("x");         // compile error
}

The error is real and the guarantee is not. readonly is erased, so a caller in plain JavaScript, or a value arriving from JSON.parse, or an as assertion anywhere in the chain, can all mutate it at run time with nothing to stop them. Stage 5 is about exactly this boundary.

So there are two separate questions to keep apart, and each has its own tool:

Practice

1. ▢ Predict the output.

   const original = { name: "svc", tags: ["a"] };
   const copy = { ...original };
   copy.name = "other";
   copy.tags.push("b");
   console.log(original);
   

2. ▢ Which of these mutations succeed?

   const c = Object.freeze({ n: 1, inner: { m: 2 }, list: [1] });
   c.n = 9;
   c.inner.m = 9;
   c.list.push(2);
   

3. ▢ You need to compare two objects by contents. Which is acceptable?

   • a) a === b
   • b) JSON.stringify(a) === JSON.stringify(b)
   • c) A hand-written comparison of the fields you care about
   • d) Object.keys(a).length === Object.keys(b).length

4. ▢ This function is meant to leave the caller's data alone. Name the defect and fix it.

   function withDefault(config: { tags: string[] }) {
     const next = { ...config };
     next.tags.push("default");
     return next;
   }
   

function withDefault(config: { tags: string[] }) {
  return { ...config, tags: [...config.tags, "default"] };
}

5. ▢ A reviewer says a parameter typed readonly string[] makes the function safe to call with shared state. What is right about that, and what is wrong?

Real-world reps

• [ ] Run the spread example and the Object.freeze example. Then run the freeze example again in a module, where strict mode makes the failed assignment throw instead of doing nothing.
• [ ] Try structuredClone on an object containing a Date, a Map, and a function. Note which survives and which throws.
• [ ] Tomorrow: find a function in code you know that spreads an argument and then modifies something nested. That is the bug from practice 4, in the wild.

Going further

• You Don't Know JS Yet: Objects & Classes, chapter 1: object fundamentals, property definitions and descriptors
• Ordinary object internal methods: what a property access actually performs
• Object Types: how the type system describes these values, including readonly
• Glossary: Type is pinned there, and this lesson is the first place the compile-time boundary bites
• Resources

Not landing? Reread the primary source at the top, since this lesson compresses it and compression is where understanding leaks. Check the glossary for any term that felt slippery.

If the lesson itself is unclear rather than the material, that is a defect: open an issue.