Destructuring, Rest, and Spread

Destructuring, Rest, and Spread | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Destructuring, Rest, and Spread step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Provide defaults only for undefined values
Distinguish rest collection from spread expansion
Remember every copy is shallow
Normalize a configuration object with aliases, defaults, rest properties, and a shallow immutable update.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

Array destructuring binds by position and object destructuring binds by property key. Aliases allow a local name to differ from the incoming key. Defaults apply only when the selected value is undefined, not when it is null or another falsy value. Nested patterns are expressive but can hide assumptions about intermediate objects, so validate unknown input before deep destructuring. Before writing more syntax, name the values involved in Destructuring, Rest, and Spread, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

Rest syntax collects what remains: function rest parameters form a real array of extra arguments, array rest collects remaining elements, and object rest collects remaining own enumerable properties. A rest element must appear in the final position of its pattern. Rest is collection; spread uses the same punctuation in an expansion context. During implementation, keep the ... rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

Spread expands iterable items into arrays or arguments and expands own enumerable properties into object literals. Later object properties overwrite earlier ones, so order defines precedence. Every spread copy is shallow. Use it for intentional structural sharing, not as proof that all nested state is isolated. Verification for Destructuring, Rest, and Spread must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Destructuring, Rest, and Spread example from validated input to returned value or visible effect before editing it.

function courseCard({ title, level = "beginner", tags = [], ...metadata }) {
  const uniqueTags = [...new Set(tags)];
  return { title: title.trim(), level, tags: uniqueTags, metadata };
}
console.log(courseCard({ title: " JavaScript ", tags: ["web", "web"], featured: true }));

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying ... contract instead of copying one solution.

const defaults = { pageSize: 20, theme: "system", filters: { active: true } };
const supplied = { pageSize: 50 };
const options = { ...defaults, ...supplied, filters: { ...defaults.filters } };
const [first, ...remaining] = ["intro", "types", "functions"];
console.log({ options, first, remaining });

How to trace this lesson

Write down the exact inputs used by Destructuring, Rest, and Spread.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

A destructuring default does not replace null, because defaults apply only when the extracted value is undefined.: Make the ... rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Provide defaults only for undefined values
2
Distinguish rest collection from spread expansion
3
Remember every copy is shallow
4
Normalize a configuration object with aliases, defaults, rest properties, and a shallow immutable update.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Destructuring, Rest, and Spread example. Explain every changed result before continuing.

function courseCard({ title, level = "beginner", tags = [], ...metadata }) {
  const uniqueTags = [...new Set(tags)];
  return { title: title.trim(), level, tags: uniqueTags, metadata };
}
console.log(courseCard({ title: " JavaScript ", tags: ["web", "web"], featured: true }));

function courseCard({ title, level = "beginner", tags = [], ...metadata }) {
  const uniqueTags = [...new Set(tags)];
  return { title: title.trim(), level, tags: uniqueTags, metadata };
}
console.log(courseCard({ title: " JavaScript ", tags: ["web", "web"], featured: true }));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const { theme = "light" } = { theme: null };

Reveal repair and explanation

const input = { theme: null };
const theme = input.theme ?? "light";

A destructuring default ignores only undefined; nullish coalescing expresses a fallback for null or undefined.

INDEPENDENT LAB

Build without copying the example

Normalize a configuration object with aliases, defaults, rest properties, and a shallow immutable update.

// Define small functions before composing the complete solution.
// Normalize a configuration object with aliases, defaults, rest properties, and a shallow immutable update.

// Define small functions before composing the complete solution.
// Normalize a configuration object with aliases, defaults, rest properties, and a shallow immutable update.

Press Run to execute your code.

Self-review checklist Provide defaults only for undefined values Distinguish rest collection from spread expansion Remember every copy is shallowWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. When does a destructuring default run? When the extracted value is undefined For every falsy value Only for zero

2. Which evidence best demonstrates mastery of Destructuring, Rest, and Spread? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering