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. Try It Yourself

Write it yourself. The tests below run against your code.

function formatUserSummary(user) {
  return "";
}

7. Next Steps

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