4.11 — Destructuring, spread & rest
By now you've written this shape a dozen times: const hp = player.hp; const level = player.level; — one ceremonial line per property, repeating the object's name like an incantation. JavaScript has a shortcut whose pattern mirrors the shape of the data: destructuring.
But the shortcut is the small half of this lesson. The big half is why it changed how functions are designed: modern APIs take a single options object and destructure it in the parameter list — every Playwright call you'll ever write looks like that.
Plus the three dots (...) that gather and spread — one syntax, two directions.
const player = { name: "Vas", hp: 90, level: 4 };
// the old way — one line per property:
// const hp = player.hp;
// const level = player.level;
const { hp, level } = player;
console.log(hp);
const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(third);
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a);Read line 7 as a stencil held against the object: const { hp, level } = player. The braces MIRROR the object’s shape, and each name inside becomes a real variable filled from the property with the SAME KEY.
The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”
Destructuring is pure convenience syntax. The engine performs the same property reads and index reads you would have written by hand — including all the reference rules of 4.6.
Two extras worth owning. Defaults: const { retries = 3 } = options — used when the property is missing or undefined, exactly like 3.10's parameter defaults. Renaming: const { url: address } = options reads property url into a variable called address.
💼 On the job — the options-object pattern is the one to internalize: it's why page.goto(url, { waitUntil: "load" }) and test.use({ viewport: … }) look the way they do. Named fields survive redesigns — adding a new option never breaks old callers, because extra and missing fields are handled gracefully.
Keep the dots straight forever with one sentence: in a pattern, dots gather; in a literal, dots spread.
Rest builds one new array from many values; spread pours one collection's values into a new home. Both are shallow — arrows copy as arrows.
⌨️ a function that reads like a form
Design a function the way real libraries do: it accepts ONE options object and unpacks only the fields it cares about — extra fields must ride along harmlessly.
requirements:
- Write a function
describethat takes ONE object parameter and destructurescityanddaysdirectly in its parameter list. It returns the stringcity + " for " + days + " days". - Create
tripwithcity="Goa",days=5— and a third propertybudget=9000that describe never mentions. Printdescribe(trip). - Then: destructure
["Goa", "Hampi", "Ooty"]so the first stop gets its own variable and the REST are gathered into another. Print how many stops the rest holds.
when you press RUN, the console must show exactly:
✏️ Quick check 1
Type what b holds:
const { b } = { a: 1, b: 2 };✏️ Quick check 2
Type what second holds:
const [, second] = ["x", "y", "z"];
✏️ Quick check 3
Type exactly what this prints:
const [h, ...t] = [1, 2, 3]; console.log(t.length);
🗣️ Now teach it back
A friend sees function setup({ speed, mode }) and asks why the parameter has braces in it — and why the caller can pass an object with five extra fields without anything breaking. Explain the options-object pattern.
Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.