Destructuring, Spread (...) & Rest Parameters

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Modern Syntax Shortcuts

ES6 introduced Destructuring for unpacking values from arrays or objects directly into distinct variables, and the versatile Spread/Rest operator (...).

2. Why It Matters

Destructuring eliminates verbose const name = user.name repetition, while Spread allows clean, non-mutating shallow copying and object merging.

3. Object & Array Destructuring

// Object Destructuring
const user = { id: 101, name: "Maria", role: "Admin" };
const { name, role } = user;
console.log(name, role); // "Maria" "Admin"

// Array Destructuring & Rest Operator
const colors = ["Red", "Green", "Blue", "Yellow"];
const [primary, secondary, ...otherColors] = colors;

console.log(primary);     // "Red"
console.log(otherColors); // ["Blue", "Yellow"]

4. The Spread Operator (...)

Use spread ... to copy or merge objects and arrays without mutating the original source:

const defaultSettings = { theme: "dark", notifications: true };
const userSettings = { theme: "light" };

// Merge objects (User settings override defaults)
const finalConfig = { ...defaultSettings, ...userSettings };
console.log(finalConfig); // { theme: "light", notifications: true }

5. Common Mistakes

• Destructuring Undefined or Null: Destructuring properties from undefined or null (e.g. const { name } = undefined) throws an uncaught TypeError. Always supply default fallback objects!
• Confusing Spread with Deep Copying: Spread ({ ...obj }) creates a shallow copy. If the object contains nested objects, nested properties still share references in memory!

6. Next Steps

Use destructuring for clean function arguments. Next, let's understand the difference between Shallow Copy and Deep Copy!