Destructuring

Extract values from arrays and objects into variables.

Array Destructuring

Extract array elements by position.

// Basic — extract by position:
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
// first = "red", second = "green", third = "blue"

// Skip elements with commas:
const [, , blue] = colors; // skip first two
// blue = "blue"

// Swap variables (no temp needed!):
let a = 1, b = 2;
[a, b] = [b, a];
// a = 2, b = 1

// Rest pattern — collect remaining:
const [head, ...tail] = [1, 2, 3, 4, 5];
// head = 1, tail = [2, 3, 4, 5]

// From function return values:
function getCoords() { return [10, 20]; }
const [x, y] = getCoords();
// x = 10, y = 20

Object Destructuring

Extract object properties by name.

// Basic — extract by property name:
const user = { name: "Alice", age: 25, city: "Tokyo" };
const { name, age, city } = user;
// name = "Alice", age = 25, city = "Tokyo"

// Order doesn't matter (it's by name, not position):
const { city, name } = user; // same result

// Only take what you need:
const { name } = user; // just name, ignore the rest

// Rest pattern — collect remaining properties:
const { name, ...rest } = user;
// name = "Alice", rest = { age: 25, city: "Tokyo" }

// From function returns:
function getUser() {
  return { id: 1, name: "Alice", role: "admin" };
}
const { id, role } = getUser();

Defaults & Renaming

Handle missing values and rename variables.

// Default values (when property is undefined):
const { name, age = 0, role = "viewer" } = { name: "Alice" };
// name = "Alice", age = 0, role = "viewer"

// Array defaults:
const [a = 1, b = 2, c = 3] = [10, 20];
// a = 10, b = 20, c = 3

// ⚠️ Only undefined triggers defaults (not null):
const { x = 5 } = { x: null };
// x = null (NOT 5)
const { y = 5 } = { y: undefined };
// y = 5 (default used)

Defaults activate only when the value is undefined — the same rule as function default parameters.

1 / 2

Nested Destructuring

Dig into deeply nested structures.

// Nested objects:
const response = {
  data: {
    user: { name: "Alice", address: { city: "Tokyo" } }
  },
  status: 200
};

const { data: { user: { name, address: { city } } } } = response;
// name = "Alice", city = "Tokyo"

// Nested arrays:
const matrix = [[1, 2], [3, 4], [5, 6]];
const [[a, b], [c, d]] = matrix;
// a = 1, b = 2, c = 3, d = 4

// Mixed (objects in arrays):
const people = [
  { name: "Alice", scores: [90, 85] },
  { name: "Bob", scores: [70, 95] },
];
const [{ name: firstName, scores: [first] }] = people;
// firstName = "Alice", first = 90

// ⚠️ Deep nesting reduces readability.
// Sometimes it's clearer to destructure in steps:
const { data } = response;
const { user } = data;
const { name } = user;

In Function Parameters

Destructure arguments directly in the function signature.

// Object parameter destructuring:
function greet({ name, greeting = "Hello" }) {
  return `${greeting}, ${name}!`;
}
greet({ name: "Alice" });           // "Hello, Alice!"
greet({ name: "Bob", greeting: "Hi" }); // "Hi, Bob!"

// Array parameter destructuring:
function sum([a, b, c = 0]) {
  return a + b + c;
}
sum([1, 2]);    // 3
sum([1, 2, 3]); // 6

// Rest in parameters:
function first({ name, ...rest }) {
  console.log(name);  // main value
  console.log(rest);  // everything else
}

// React component pattern:
function UserCard({ name, email, avatar = "/default.png" }) {
  // Direct access to props without props.name, props.email
}

// With TypeScript:
// function process({ id, data }: { id: number; data: string }) {}

// Default the whole parameter to {}:
function configure({ debug = false, timeout = 3000 } = {}) {
  return { debug, timeout };
}
configure();              // works! { debug: false, timeout: 3000 }
configure({ debug: true }); // { debug: true, timeout: 3000 }

FAQ

Common questions about destructuring.