JS Foundations #7 — Destructuring, Spread & Rest

Destructuring, spread, and rest syntax are three of the most-used ES6 features. They replace whole blocks of manual extraction, copying, and argument collection with concise syntax.

Before vs After:

This article covers every variant with runnable examples.

Prerequisites: JS Foundations #1 — Variables & Scope

1. Array Destructuring — Positional Extraction

Extract array values into named variables based on position:

Swapping variables without a temp — a classic destructuring use case:

2. Object Destructuring — Named Extraction

Extract object properties by name — order doesn't matter:

3. Nested Destructuring

Destructure deeply nested structures in one statement:

4. Destructuring in Function Parameters

The most practical pattern — destructure directly in the function signature:

The = {} at the end makes the entire parameter optional. Without it, calling the function with no arguments tries to destructure undefined, which throws:

Always add = {} when a destructured parameter is optional.

5. Spread Operator — Copy and Merge

The ... spread operator "expands" an iterable or object into individual elements:

6. Spread for Immutable Updates

Spread is the standard way to update state immutably (React, Redux, etc.):

7. Rest Parameters — Collect Remaining Arguments

Rest parameters collect all remaining arguments into a real array:

8. Spread vs Rest — Same Syntax, Different Context

... means spread when used to EXPAND (in calls, array/object literals). It means rest when used to COLLECT (in function parameters, destructuring):

Key Takeaways

• Destructuring replaces manual obj.prop extraction with concise const { prop } = obj.
• Default values in destructuring prevent undefined when properties/indices are missing.
• Rest parameters (...args) collect arguments into a real array — always use instead of arguments.
• Spread (...) creates shallow copies and merges — [...arr], {...obj}.
• Spread + map is the standard pattern for immutable state updates.
• ... means spread when expanding, rest when collecting — context determines meaning.

Next: JS Foundations #8 — Template Literals & Tagged Templates — multiline strings, expression interpolation, and building tagged template functions.