Destructuring: Objects & Arrays

Easy

Destructuring extracts values from arrays and objects into distinct variables. Essential for modern JavaScript development with support for defaults, renaming, and nesting.

Interactive Visualization

Destructuring

Old Way
const user = { name: "Alice", age: 25 };
const name = user.name;
const age = user.age;
Modern Way
Click transform to see

Key Points

  • Object: const {a, b} = obj
  • Array: const [x, y] = arr
  • Defaults: const {a = 1} = obj
  • Rename: const {a: newName} = obj
  • Nested: const {a: {b}} = obj
  • Params: function({a, b}) {}

Code Examples

Object Destructuring

const user = { name: "Alice", age: 25 };
const { name, age } = user;
// name = "Alice", age = 25

// With defaults
const { city = "NYC" } = user;

// Renaming
const { name: fullName } = user;

Extract properties with optional defaults and renaming