Useful Cheatsheets
Build / Code / JavaScript

Destructuring Spread and Rest

Unpack values with destructuring, then expand or gather them using the spread and rest operators.

TL;DR

  1. Extract object properties into variables with curly brace syntax.
  2. Extract array elements into variables with square bracket syntax.
  3. Use default values when properties or elements are missing.
Jump to section

Object Destructuring

    Basic extraction

    Extract properties from an object into separate variables.

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

    Property names must match the object keys exactly.

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

    Use shorter or clearer variable names with renaming.

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

    Destructure nested objects by continuing the pattern.

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

Array Destructuring

    Position-based extraction

    Extract array elements into separate variables by position.

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

    Skip elements by leaving the position empty.

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

    Use rest syntax to capture remaining elements.

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

    Swap variables without a temporary variable.

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

Default Values & Spread with Arrays

    Basic defaults

    Provide default values for properties that might be missing.

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

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

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

    Use defaults with function parameters for required values.

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

    Combines elements of multiple arrays into a new array literal context.

    const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]
    Array copy

    Creates a shallow copy of an array, breaking the original reference link.

    const original = [1, 2, 3];
const copy = [...original];
    Function arguments

    Expands array items into function call parameters.

    const numbers = [5, 10, 3];
Math.max(...numbers); // 10

Spread with Objects

    Object merging

    Merges property fields of multiple objects into a new object container.

    const user = { name: "Alice", age: 30 };
const updated = { ...user, active: true };
    Property override

    Applies new values to keys by placing overrides after the spread target.

    const base = { role: "user", id: 10 };
const admin = { ...base, role: "admin" };
    Shallow constraints

    Spreads only top-level fields, leaving nested objects pointing to shared references.

    const obj = { nested: { val: 1 } };
const copy = { ...obj }; // copy.nested is shared

Rest Parameters

    Argument gathering

    Collects excess function arguments into a single standard array handle.

    function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
    Named plus rest

    Combines initial named parameters with trailing rest parameter collections.

    function greet(message, ...names) {
  console.log(`${message} ${names.join(", ")}`);
}
    Array destructuring

    Gathers remaining array items into a slice list during value assignment.

    const [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]
    Object destructuring

    Extracts target properties while collecting remaining fields in a separate object.

    const { password, ...safeData } = user;
// password is isolated, rest goes to safeData

Tips

  1. Use destructuring in function parameters to document what properties a function expects, making code more readable and self-documenting.
  2. Combine destructuring with rest syntax to pull out a few named values while collecting the remaining properties into one object.
  3. Rename destructured variables to avoid naming collisions when two objects in the same scope share a property name.

Warnings

  1. Destructuring doesn't create new properties on objects — it just assigns values to variables in the local scope.
  2. Destructuring a null or undefined value throws a TypeError immediately, so guard against missing data before destructuring it.
  3. Default values only apply when a property is undefined, so a falsy value like false or 0 still wins.

In Practice

FAQ