Destructuring, Spread & Rest — JavaScript Course

What you'll learn

Destructuring and spread make data movement visible: extract the fields you need, gather the remainder, and create shallow updated copies without repetitive property access.

By the end of this lesson, you'll be able to:

Destructure arrays, objects, and parameters
Use spread and rest in the correct positions
Recognize shallow-copy boundaries

Core mental model

Use this decision table as a compact reference. Focus on what each tool means and when it earns its place in production code.

Concept	What it means	Decision rule
Destructuring	Pattern extracts values into bindings	Use it when names make the consumed shape clearer
Spread	Expands iterable values or object properties	Create shallow copies and additions
Rest	Collects remaining values	Separate known fields from an open remainder

Professional workflow

Build the behavior in small, observable steps. Each step should leave something you can inspect or test.

Describe the data transformation boundary: inputs, outputs, state, timing, and expected failures.
Implement the smallest correct path with names that expose intent.
Add edge cases and failure handling before introducing abstractions.
Verify behavior with realistic data and one deliberately adversarial example.
Refactor only after the observable behavior is protected.

Make behavior observable

Before optimizing or abstracting, make inputs, outputs, state changes, timing, and failure paths visible. JavaScript becomes much easier to reason about when hidden work is exposed.

Guided code lab

Extract and rename safely

Defaults apply to undefined, and renaming keeps local vocabulary clear.

destructure.js

const response = { id: 7, display_name: "Nour", role: undefined };
const { display_name: displayName, role = "learner" } = response;
console.log(displayName, role);

Build an immutable nested update

Each object along the changed path needs its own spread.

update.js

const state = { user: { name: "Ava", theme: "dark" }, ready: true };
const next = {
  ...state,
  user: { ...state.user, theme: "light" },
};
console.log(state.user.theme, next.user.theme);

Production practice

Contract

Destructuring patterns document the minimum input shape a function consumes.

Verification

Test missing optional fields, nested references, and mutation after copying.

Operations

Avoid spreading very large structures repeatedly in hot update paths.

Common failure mode

Object and array spread are shallow; nested objects remain shared unless copied along the changed path.

Independent workshop

Normalize API user records into a stable application shape without mutating the response.

Your finished workshop must include:

Renamed snake_case fields
Defaults for missing optional data
A nested immutable preference update

Definition of done

Demonstrate the happy path and at least two edge cases, keep responsibilities separated, and add a short note explaining one design choice.

Recap & quick check

Key takeaways

Destructuring extracts by pattern
Spread expands values
Rest collects leftovers
Spread copies only one level deep

Quick check

1. When does a destructuring default run?

2. What does {...object} create?

3. Where must a rest element appear?

Keep the workshop. Later modules deliberately build on these decisions, so each exercise can become part of your final portfolio architecture.