17.1 Destructuring

Overview

Destructuring is a syntax that allows unpacking values from arrays or properties from objects into distinct variables. It makes code more readable and reduces repetitive property access.

Array Destructuring

┌─────────────────────────────────────────────────────────────────────────┐
│                      Array Destructuring                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  const colors = ['red', 'green', 'blue'];                               │
│                                                                         │
│  // Traditional way                                                     │
│  const first = colors[0];                                               │
│  const second = colors[1];                                              │
│                                                                         │
│  // Destructuring                                                       │
│  const [first, second, third] = colors;                                 │
│                                                                         │
│  console.log(first);  // 'red'                                          │
│  console.log(second); // 'green'                                        │
│  console.log(third);  // 'blue'                                         │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Skipping Elements

const [first, , third] = ['a', 'b', 'c'];
// first = 'a', third = 'c' (skipped 'b')

Rest Pattern

const [head, ...tail] = [1, 2, 3, 4, 5];
// head = 1, tail = [2, 3, 4, 5]

Default Values

const [a, b, c = 'default'] = ['x', 'y'];
// a = 'x', b = 'y', c = 'default'

Swapping Variables

let a = 1,
  b = 2;
[a, b] = [b, a];
// a = 2, b = 1

Object Destructuring

┌─────────────────────────────────────────────────────────────────────────┐
│                      Object Destructuring                               │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  const person = {                                                       │
│      name: 'Alice',                                                     │
│      age: 30,                                                           │
│      city: 'NYC'                                                        │
│  };                                                                     │
│                                                                         │
│  // Traditional way                                                     │
│  const name = person.name;                                              │
│  const age = person.age;                                                │
│                                                                         │
│  // Destructuring                                                       │
│  const { name, age, city } = person;                                    │
│                                                                         │
│  console.log(name); // 'Alice'                                          │
│  console.log(age);  // 30                                               │
│  console.log(city); // 'NYC'                                            │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Renaming Variables

const { name: personName, age: personAge } = person;
// personName = 'Alice', personAge = 30

Default Values

const { name, country = 'Unknown' } = { name: 'Alice' };
// name = 'Alice', country = 'Unknown'

Rename with Default

const { name: n = 'Anonymous' } = {};
// n = 'Anonymous'

Nested Destructuring

const user = {
  id: 1,
  profile: {
    name: 'Alice',
    address: {
      city: 'NYC',
      zip: '10001',
    },
  },
  scores: [85, 90, 78],
};

// Nested object destructuring
const {
  profile: {
    name,
    address: { city },
  },
} = user;

// Nested array destructuring
const {
  scores: [first, second],
} = user;

Function Parameter Destructuring

┌─────────────────────────────────────────────────────────────────────────┐
│                   Parameter Destructuring                               │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  // Object parameters                                                   │
│  function greet({ name, age }) {                                        │
│      return `${name} is ${age}`;                                        │
│  }                                                                      │
│                                                                         │
│  greet({ name: 'Alice', age: 30 });                                     │
│                                                                         │
│  // With defaults                                                       │
│  function createUser({                                                  │
│      name = 'Anonymous',                                                │
│      role = 'user',                                                     │
│      active = true                                                      │
│  } = {}) {                                                              │
│      return { name, role, active };                                     │
│  }                                                                      │
│                                                                         │
│  createUser();  // Uses all defaults                                    │
│  createUser({ name: 'Alice' });  // Override name only                  │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Comparison Table

Use Cases

1. •Function returns - Multiple return values
2. •Config objects - Extract settings
3. •API responses - Pull needed data
4. •React props - Component parameters
5. •Module imports - Named exports

Summary

• •Array destructuring uses position
• •Object destructuring uses property names
• •Both support defaults and rest patterns
• •Nesting allows deep extraction
• •Function parameters can be destructured