Typorithm · easy

Destructuring & Spread

destructuring-spreadjavascript-coredestructuringspreadrest

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Destructuring & Spread

Objects & this

Destructuring unpacks values from objects and arrays into variables, with defaults for missing entries and ...rest to gather the leftovers. Spread (...) copies an object or array out into a new one or into function arguments.

Object destructuring binds variables by key: const { a, b = 1 } = obj pulls a from obj and falls back to 1 when b is missing.

Array destructuring binds by position: const [first, ...rest] = arr puts the first element in first and collects the rest into a new array.

Defaults fire only when the value is undefined — a present-but-falsy value like 0 or "" keeps its own value.

Spread is the inverse of rest: { ...base, ...override } shallow-copies keys into a new object (later wins on collision), and fn(...args) spreads an array into separate arguments.

Destructuring unpacks objects by key and arrays by position.

Defaults apply only when a value is undefined.

...rest gathers the remaining entries into an array.

Spread copies into a new object/array or into call arguments.

const obj = { a: 10, c: 30 };
const { a, b = 1 } = obj;
const arr = [1, 2, 3, 4];
const [first, ...rest] = arr;
const base = { x: 1, y: 2 };
const override = { y: 9 };
const merged = { ...base, ...override };
const fn = (...args) => args.length;
fn(...rest);

Read the implementation

Connect each part of the code to the concept before you type.

1. Object destructuring

Pulls a out of obj; b is absent, so its default of 1 is used.

const { a, b = 1 } = obj;

2. Default value

A default applies only when the property is undefined or missing.

b = 1

3. Array rest

first takes element 0; ...rest gathers the remaining elements into a new array.

const [first, ...rest] = arr;

4. Object spread

Spreads both objects into a new one; later keys (override.y) win on collision.

const merged = { ...base, ...override };

5. Spread into a call

Spreads the rest array into individual arguments for fn.

fn(...rest);

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.