Spread & rest

Same dots, two directions

JavaScript uses three dots, ..., for two opposite jobs. Where the dots stand decides which job they do:

• Spread takes the items out of a list and lays them out one by one.
• Rest gathers the items that are left over into one new list.

You already met rest parameters and spread in function calls in the Default & rest parameters lesson. This lesson uses the dots in more places: arrays, function calls, objects, and destructuring. It also shows which value wins when two objects are merged, why a spread copy can still share data, and the mistakes people make most often.

const items = ["tea", "toast"];
const menu = [...items, "fruit"];
const [first, ...leftovers] = menu;
console.log(menu.join(" / ") + " | " + first + " | " + leftovers.join(" / "));

Line 1 makes a small array, items. Line 2 uses spread while it builds a new array, menu. The two items from items are laid out inside menu, and "fruit" goes after them.

Line 3 uses rest while it reads menu. The variable first gets the first item. The variable leftovers gathers all the other items into a new array. Line 4 prints tea / toast / fruit | tea | toast / fruit.

The table lists every place the dots can stand. Read a row from left to right: where the dots are, which job they do, what happens, and a short example.

Try the first lab now. Each card has ... in it. Decide whether those dots lay items out (spread) or gather leftovers (rest).

Spread works in two places with lists:

• Inside the square brackets of a new array, spread puts the items of another array at that exact spot. The old array does not change.
• Inside the round brackets of a function call, spread hands each item to the function as its own argument. An argument is a value you pass into a function.

const morning = ["tea"];
const breakfast = ["water", ...morning, "toast"];
console.log(breakfast.join(" + "));

Line 1 makes an array with one drink in it. Line 2 makes a new array. It puts the items of morning between two fixed values, so line 3 prints water + tea + toast. The morning array still has its one item. Spread fills the new array; it does not change the old one.

const word = "tea";
const letters = [...word];
console.log(letters.join("-"));

Spread in an array works on any iterable. An iterable is a value that JavaScript can walk through one item at a time. Arrays are iterable. Strings are iterable too: each character is one item. So line 2 makes an array of three letters, and line 3 prints t-e-a.

A plain object, like { theme: "dark" }, is not iterable. To copy an object's properties, use object spread, which comes in the next section.

Now step through a longer example. It spreads two arrays into a new one, then spreads part of that array into a function call. After that, switch line 3 and run it again. Notice that spread keeps the items in the same order. It does not sort them, and it does not change the old 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 showed concat and spread for copying arrays. Spread is a good choice when you want to see at a glance where each item goes.

Inside the curly brackets of a new object, spread copies properties from another object into the new one. It copies the object's own enumerable properties:

• Own means the property is stored on the object itself, not borrowed from another object.
• Enumerable means the property shows up when you list the object's keys.
• The properties you write in an object literal, like { theme: "dark" }, are both.

Spread copies from left to right. If two objects have a property with the same name, the one copied later replaces the one copied earlier.

const defaults = { theme: "light", fontSize: 14 };
const user = { theme: "dark" };
const settings = { ...defaults, ...user };
console.log(settings.theme + " / " + settings.fontSize);

Line 1 sets two default values. Line 2 sets only a theme. Line 3 copies defaults first and user second. Both have a theme, so the later one, "dark", wins. Only defaults has fontSize, so it stays 14. Line 4 prints dark / 14.

Step through the same idea below. Then switch the order on line 3 and watch the winner change.

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 one, name is always "X", because it comes last. In the second one, user.name comes last, so it replaces "X" if user has a name.

The next block tests some unusual cases. It uses two new tools:

• Object.create(parent) makes an empty object that borrows properties from parent. Borrowed properties are not the object's own.
• Object.defineProperty adds one property and lets you choose its settings, such as enumerable: false. A getter is a property whose value comes from a function. The function runs each time the property is read.

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 takes values out of an array or object and puts them into variables. The left side, like [next, ...waiting], is called the pattern. Rest in a pattern gathers everything that the pattern did not already take. This is the opposite direction from spread.

const queue = ["Asha", "Ben", "Chen"];
const [next, ...waiting] = queue;
console.log(next + " | " + waiting.join(", "));

Line 1 makes a queue of three names. Line 2 puts "Asha" into next. Then ...waiting gathers the names that are left into a new array. Line 3 prints Asha | Ben, Chen. Rest makes a new array; it does not remove anything from queue.

const queue = ["tea"];
const [next, ...waiting] = queue;
console.log(next + " / " + waiting.length);

This queue has only one item, and it goes into next. No items are left over. Rest still makes an array, but the array is empty. So line 3 prints tea / 0. Your code can check waiting.length instead of guessing that a second item exists.

Step through rest in an object pattern and in an array pattern below.

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(", "));

Both patterns are common in real code:

• The object pattern { password, ...safeUser } leaves one property out and keeps all the others in safeUser.
• The array pattern [first, ...others] keeps the first item apart and keeps the other items together in others.

Merging & copying

Spread makes a new outer array or object. But the copy is shallow: it copies only the outer level. If a property holds another object, the copy points to that same inner object. You saw this idea in the Objects & references lesson: two variables can point to one object.

const profile = { name: "Asha", preferences: { theme: "dark" } };
const copy = { ...profile };
copy.preferences.theme = "light";
console.log(profile.preferences.theme);

Line 2 makes a new outer object, copy. But copy.preferences still points to the same inner object as profile.preferences. Line 3 changes that shared inner object. So line 4 prints light, even though the code never touched profile by name.

To keep a change apart from the old object, copy the inner level too. An update that makes new objects instead of changing the old ones is called an immutable update.

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 rule: copy every object or array on the way to the value you change. Lines 6 to 8 do that:

1. Line 6 copies the outer state object.
2. Line 7 copies the inner user object, then sets a new name.
3. Line 8 copies the tags array and adds one more tag.

Line 10 still prints Grace, line 11 prints Ada, and line 12 prints false because the two tags arrays are different arrays. Tools for screen updates, such as React and Redux, use this style. A new object is easy to spot as a change, so the tool knows what to redraw.

The table compares four ways to copy. Read each row: the tool, how deep it copies, when to use it, and what to watch for.

Where you’ll use this

You use spread and rest whenever you want new data without changing the old data. These four patterns come up again and again:

• Merge defaults with user settings: { ...defaults, ...userSettings } keeps every default the user did not set, and the user's choices win.
• Leave out private fields: const { password, ...safeUser } = user; gives you an object without the password, ready to show or log.
• Add to the end without changing the old array: [...items, newItem] returns a new array.
• Insert or remove an item: spread the parts you want to keep, which you cut out with slice.

const todos = ["email", "shop"];
const nextTodos = [...todos, "walk"];
console.log(todos.join(" / ") + " -> " + nextTodos.join(" / "));

Line 2 makes a new list with one more task. Line 3 prints email / shop -> email / shop / walk. The old list is still there, so you can use it for an undo button or to compare old and new.

The next block inserts and removes an item at position index. items.slice(start, end) returns a new array with the items from start up to, but not including, end.

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];

1. Lines 1 to 5: spread the items before index, then newItem, then the items from index on.
2. Lines 6 to 9: spread the items before index, then the items after it. The item at index is skipped.

Order rules & pitfalls

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

1. Spread in an array or a call keeps the items in their order.
2. Object spread copies from left to right, and a later property wins.
3. Rest in destructuring must come last, because it gathers everything that is left.
4. Object spread copies own enumerable properties only.
5. Spread visits every item it copies, so a bigger list takes longer to copy.

Common misconceptions

Guess the output first. Then run the code in your console or editor. Each answer is checked against what the code really prints.

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 choice explains why it is right or wrong. For code questions, first look at the code around the dots: do they lay items out or gather leftovers?

Key takeaways

• Spread lays items out; rest gathers leftovers.
• Spread in an array or a call lays out the items of an iterable, in order.
• Object spread copies own enumerable properties, and a later property wins.
• Rest in destructuring gathers what is left, and it must come last.
• Spread copies only the outer level, and bigger copies take longer. Copy inner levels on purpose.

Up next: Map & Set. You'll meet two collections: one that keeps each value only once, and one that can use any value as a key.