Destructuring & Spread (JS)

Also Known As

TL;DR

Explanation

Array destructuring: const [first, , third] = arr — skips can use empty slots; rest elements: const [head, ...tail] = arr. Object destructuring: const { name, age = 18 } = person — default values for absent keys; rename: const { name: userName } = person; nested: const { address: { city } } = user. Spread in arrays: const merged = [...arr1, ...arr2]; in objects (ES2018): const copy = { ...obj, newProp: 1 } — shallow clone with override. Function parameters: function process({ id, name }) {} — named parameter pattern. Rest in objects: const { id, ...rest } = record — omit known keys. Compared to PHP 8.1 array unpacking and named arguments, JS destructuring is more flexible and widely used.

Diagram

flowchart LR
    subgraph Object_Destructuring
        OBJ[const user = name email role]
        OBJ -->|destructure| VARS[const name email = user]
        VARS -->|rename| RENAME[const n: name = user]
        VARS -->|default| DEFAULT[const role = admin = user]
    end
    subgraph Array_Destructuring
        ARR[const arr = 1 2 3]
        ARR -->|destructure| AVALS[const a b c = arr]
        ARR -->|skip| SKIP[const a _ c = arr]
        ARR -->|rest| REST[const first ...others = arr]
    end
    subgraph Function_Params
        FN[function greet name greeting = Hi]
        FN -->|called with| CALL[greet name: Alice]
    end
style OBJ fill:#6e40c9,color:#fff
style ARR fill:#1f6feb,color:#fff
style FN fill:#238636,color:#fff

Common Misconception

Why It Matters

Common Mistakes

• Not using default values in destructuring when a property may be missing: const { name = 'Guest' } = user.
• Nested destructuring that becomes hard to read — extract intermediate variables for deeply nested structures.
• Array destructuring for associative data that would be clearer as object destructuring.
• Not using rest in destructuring: const { id, ...rest } = user to separate one property from the rest.

Code Examples

// Manual property access — verbose:
const name = user.name;
const email = user.email;
const city = user.address.city;

// Destructuring:
const { name, email, address: { city } } = user;

// With rename and default:
const { name: fullName, role = 'user' } = user;

// Swap without temp variable
[a, b] = [b, a];

// Object rest — strip id from record
const { id, ...payload } = record;

// Default + rename
const { timeout: ms = 3000, retries = 3 } = options;

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Tags

Related Terms