objects Tutorial | ConsistCode

📖 The Story & Real-World Analogy

The High-Security Vault System

"Think of a JavaScript object as a secure locker bank. Each locker has a label (key) and holds either a precious gemstone (primitive value) or a keycard pointing to another locker room (reference to another object). You can set security sensors on each locker (`Object.defineProperty`): make it read-only (`writable: false`), invisible to visitors (`enumerable: false`), or prevent the lock from being changed (`configurable: false`). If you want to freeze the whole vault, you can engage `Object.freeze()`."

Objects are collections of key-value pairs stored in the Memory Heap. Variables storing objects hold memory references (pointers), not the actual data itself.

⚙️ How It Works Under The Hood (Step-by-Step)

1

Reference Semantics in Memory Heap

When assigning `objB = objA`, both variables point to the exact same memory address on the heap. Mutating `objB` mutates `objA`.

2

Shallow vs Deep Copying

Shallow copies (`{ ...obj }`, `Object.assign()`) clone top-level properties but copy references for nested objects. Deep copies (`structuredClone()`, recursive clones) duplicate every nested object independently.

3

Object Traversal Utilities

`Object.keys()`, `Object.values()`, and `Object.entries()` return arrays of enumerable own properties, ideal for functional pipelines.

4

Immutability Levels

`Object.preventExtensions()`: no new properties. `Object.seal()`: no new/deleted properties. `Object.freeze()`: no new, deleted, or modified properties (shallow).

💻 Interactive Code Walkthrough

Deep copying with structuredClone vs shallow copy and Object.freeze:

JAVASCRIPT

const hero = {
  name: "Spider-Man",
  details: { city: "Queens", suit: "Spandex" }
};

// 1. Shallow copy pitfall
const shallow = { ...hero };
shallow.details.city = "Brooklyn";
console.log("Original affected by shallow:", hero.details.city); // Brooklyn!

// 2. Modern Deep Copy
const deep = structuredClone(hero);
deep.details.city = "Manhattan";
console.log("Original safe with deep:", hero.details.city); // Brooklyn (unchanged by deep)

// 3. Object.freeze (Shallow immutability)
const frozen = Object.freeze({ appName: "ConsistCode" });
// frozen.appName = "Hacked"; // In strict mode throws TypeError
console.log("Frozen appName:", frozen.appName);

Console Output:

CODE

Original affected by shallow: Brooklyn
Original safe with deep: Brooklyn
Frozen appName: ConsistCode

⚠️ Common Pitfalls & Interview Traps

Trap

Object.freeze is Shallow Only

The Risk: `Object.freeze(obj)` only freezes top-level keys. Nested objects like `obj.nested.key = "new"` can still be freely mutated.

The Fix: Use a recursive `deepFreeze()` helper if full immutability across all nested levels is required.

Trap

Equality Checking Objects by Reference

The Risk: `{ a: 1 } === { a: 1 }` evaluates to `false` because they occupy different addresses in heap memory.

The Fix: For structural equality, perform deep comparisons (e.g., recursive checks or lodash `isEqual`).

⚡ 30-Second Quick Revision Cheat Sheet (TL;DR)

✓ Objects are reference types stored in the Heap.
✓ Shallow copy (`{ ...obj }`) does NOT clone nested objects.
✓ Use native `structuredClone(obj)` for modern deep copies.
✓ `Object.freeze()` is shallow; nested objects remain mutable unless deep-frozen.
✓ Comparing two distinct objects with `===` checks reference equality, not structural values.

objects

Objects in JavaScript