JavaScript Destructuring

Object Destructuring

• Extract properties from an object into separate variables.

  const user = { name: "Alice", age: 30 };
  const { name, age } = user;
  console.log(name); // "Alice"

• Property names must match the object keys exactly.

  const { name, email } = user;
  // name is available, but email is undefined

• Destructure only the properties you need.

  const { name } = user;
  // age is not extracted

• Use shorter variable names with renaming.

  const { name: userName, age: userAge } = user;

• Destructure nested objects by continuing the pattern.

  const user = { profile: { name: "Alice" } };
  const { profile: { name } } = user;

Array Destructuring

• Extract array elements into separate variables by position.

  const colors = ["red", "green", "blue"];
  const [first, second, third] = colors;
  console.log(first); // "red"

• Skip elements by leaving the position empty.

  const [first, , third] = colors;
  // second is not assigned

• Use rest syntax to capture remaining elements.

  const [first, ...rest] = colors;
  // first = "red", rest = ["green", "blue"]

• Destructure nested arrays the same way.

  const matrix = [[1, 2], [3, 4]];
  const [[a, b], [c, d]] = matrix;

• Swap variables without a temporary variable.

  let x = 1, y = 2;
  [x, y] = [y, x]; // x = 2, y = 1

Default Values

• Provide default values when properties are missing.

  const { name = "Guest", email = "no-email" } = {};
  console.log(name); // "Guest"

• Defaults work with both objects and arrays.

  const [first = "a", second = "b"] = [];
  // first = "a", second = "b"

• Defaults are used only if the value is undefined, not falsy.

  const { count = 0 } = { count: false };
  // count = false, not 0

• Use defaults with function parameters for required values.

  function greet({ name = "Guest" } = {}) {
    console.log(`Hello ${name}`);
  }
  greet(); // "Hello Guest"

• Combine renaming and defaults in one destructuring expression.

  const { name: userName = "Anonymous", age: userAge = 0 } = {};
  console.log(userName); // "Anonymous"
  console.log(userAge);  // 0

Function Parameters

• Destructure objects directly in function parameters.

  function displayUser({ name, age }) {
    console.log(`${name} is ${age}`);
  }
  displayUser({ name: "Alice", age: 30 });

• Destructure arrays in function parameters the same way.

  function sum([a, b]) {
    return a + b;
  }
  sum([1, 2]); // 3

• Use default parameters with destructuring.

  function greet({ greeting = "Hello" } = {}) {
    console.log(greeting);
  }
  greet(); // "Hello"

• This pattern makes function signatures self-documenting.
• Destructuring in parameters forces shape validation.

Advanced Patterns

• Compute property names using computed property names.

  const key = "name";
  const { [key]: value } = { name: "Alice" };

• Extract and collect remaining properties into an object.

  const { name, ...rest } = { name: "Alice", age: 30, city: "NYC" };
  // rest = { age: 30, city: "NYC" }

• Rename multiple properties and set defaults.

  const { name: n = "Guest", age: a = 0 } = user;

• Destructure deeply nested paths with aliases.

  const { 
    profile: { 
      contact: { email } 
    } 
  } = user;

Tip: Use destructuring in function parameters to document what properties a function expects, making code more readable and self-documenting.

Warning: Destructuring doesn't create new properties on objects — it just assigns values to variables in the local scope.