Spread & rest

Same dots, two directions

JavaScript uses ... for two opposite jobs. The name depends on where the dots appear: spread expands, and rest collects. You already met rest parameters and spread in calls in the Default & rest parameters lesson. Here we go deeper: arrays, calls, objects, destructuring, merge order, shallow copies, and the edge cases professionals trip over.

Try the first lab before reading further. Each card contains .... Your job is to decide whether those dots expand or collect.

In an array literal, spread inserts the elements of an iterable at that exact position. It is a non-mutating way to copy, prepend, append, or insert. In a function call, spread turns an iterable into separate arguments.

Step through the example. Then switch line 3 and notice that spread obeys order exactly: it does not sort, flatten deeply, or mutate the source arrays.

1const front = ["warm-up", "article"];Run2const back = ["quiz"];3const lesson = ["intro", ...front, "lab", ...back];4console.log(lesson.join(" -> "));5function announce(first, second, third) {6  console.log(first + " | " + second + " | " + third);7}8announce(...lesson.slice(0, 3));

The Slicing & splicing lesson introduced concat and spread for array copying. Use spread when the position is easy to read at a glance, especially for small immutable updates.

In an object literal, spread copies own enumerable properties into a new object. The copy happens from left to right. If two sources name the same property, the later one overwrites the earlier one.

1const defaults = { theme: "light", pageSize: 20 };Run2const userSettings = { theme: "dark" };3const merged = { ...defaults, ...userSettings };4console.log(merged.theme + " / " + merged.pageSize);

This is why { ...user, name: "X" } and { name: "X", ...user } are not the same. In the first, name is definitely "X". In the second, user.name can overwrite it.

1const safe = { ...null, ...undefined };2const letters = { ..."JS" };3const source = Object.create({ inherited: "skip" });4Object.defineProperty(source, "hidden", { value: "skip", enumerable: false });5Object.defineProperty(source, "label", {6  enumerable: true,7  get() { return "Ada"; },8});9const copy = { ...source };10console.log(JSON.stringify(safe));11console.log(JSON.stringify(letters));12console.log(JSON.stringify(copy));13console.log([...null]);

Destructuring pulls values out of arrays or objects. Rest in a destructuring pattern collects whatever was not already pulled out. This is the opposite direction from spread.

1const user = { name: "Ada", role: "admin", password: "secret" };Run2const { password, ...safeUser } = user;3const steps = ["draft", "review", "publish"];4const [first, ...others] = steps;5console.log(JSON.stringify(safeUser));6console.log(first + " / " + others.join(", "));

The object pattern { password, ...safeUser } is useful in real code because it omits one field and keeps the rest. The array pattern [first, ...others] is useful when the first item has a special meaning and the remaining items should stay grouped.

Merging & copying

Spread creates a new outer container, but it is a shallow copy. That matches what you learned in the Objects & references lesson: object variables can share the same nested object.

1const state = {2  user: { name: "Grace", role: "admin" },3  tags: ["js", "data"]4};5const nextState = {6  ...state,7  user: { ...state.user, name: "Ada" },8  tags: [...state.tags, "spread"]9};10console.log(state.user.name);11console.log(nextState.user.name);12console.log(state.tags === nextState.tags);

The important part is copying every container on the path you change. The outer state is copied, the nested user object is copied before name changes, and tags is copied before appending. This is the style used by UI state tools such as React and Redux because new references make changes easy to detect.

Where you’ll use this

Spread and rest appear anywhere you transform data without mutating the original. These patterns are small, but they show up constantly.

• Merge defaults with user settings: { ...defaults, ...userSettings } keeps missing defaults and lets user choices win.
• Remove private fields: const { password, ...safeUser } = user; keeps a clean object for display or logging.
• Append immutably: [...items, newItem] returns a new array.
• Insert or remove with slices: combine slice and spread to rebuild the parts you want.

1const inserted = [2  ...items.slice(0, index),3  newItem,4  ...items.slice(index)5];6const removed = [7  ...items.slice(0, index),8  ...items.slice(index + 1)9];

Order rules & pitfalls

Most mistakes come from expecting the dots to do more than they promise. Keep these rules close:

1. Array and call spread keep the iterable’s order.
2. Object spread copies left to right; later properties win.
3. Rest in destructuring must be last because it collects all remaining values.
4. Object spread copies only own enumerable properties.
5. Spread copies are O(n) because JavaScript visits the values it copies.

Common misconceptions

Predict first, then run the snippets in your console or editor. Each answer is checked against the real output.

const defaults = { theme: "light", density: "comfortable" };
const user = { density: "compact" };
const settings = { ...defaults, ...user };
console.log(settings.theme + " / " + settings.density);

const defaults = { theme: "light", density: "comfortable" };
const user = { density: "compact" };
const settings = { ...defaults, ...user };
console.log(settings.theme + " / " + settings.density);

const user = { name: "Ada", password: "secret", role: "admin" };
const { password, ...publicUser } = user;
console.log(Object.keys(publicUser).join(","));

const user = { name: "Ada", password: "secret", role: "admin" };
const { password, ...publicUser } = user;
console.log(Object.keys(publicUser).join(","));

const state = { user: { name: "Grace", score: 10 }, theme: "dark" };
const next = { ...state, user: { ...state.user, name: "Ada" } };
console.log(state.user.name + " -> " + next.user.name);

const state = { user: { name: "Grace", score: 10 }, theme: "dark" };
const next = { ...state, user: { ...state.user, name: "Ada" } };
console.log(state.user.name + " -> " + next.user.name);

const user = { name: "Ada" };
console.log(({ ...user, name: "Lin" }).name);
console.log(({ name: "Lin", ...user }).name);

const user = { name: "Ada" };
console.log(({ ...user, name: "Lin" }).name);
console.log(({ name: "Lin", ...user }).name);

const items = ["draft", "review"];
const nextItems = [...items, "publish"];
console.log(items.join("/") + " -> " + nextItems.join("/"));

const items = ["draft", "review"];
const nextItems = [...items, "publish"];
console.log(items.join("/") + " -> " + nextItems.join("/"));

Every option explains itself. For code questions, read the dots from the surrounding syntax before you choose.

Key takeaways

• Spread expands; rest collects.
• Array and call spread expand iterable values in order.
• Object spread copies own enumerable properties, and later properties win.
• Rest in destructuring collects leftovers and must be last.
• Spread copies are shallow and O(n); copy nested levels deliberately.

Up next: Map & Set, where you’ll choose collections made for unique values and flexible keys.