What does the spread operator do?

The spread syntax ... expands an iterable or an object into its individual elements wherever a list of values is expected.

const nums = [1, 2, 3];

const copy = [...nums];                    // [1, 2, 3]
const joined = [...nums, 4, 5];            // [1, 2, 3, 4, 5]
Math.max(...nums);                         // 3 — as arguments

const user = { name: "Mai", role: "admin" };
const updated = { ...user, role: "owner" };  // later keys win

Note in the object case that the last occurrence of a key wins, which is what makes { ...defaults, ...overrides } such a common idiom.

Spread versus rest

Same three dots, opposite jobs. Spread expands a collection; rest collects remaining items, and only appears in a parameter list or on the left of a destructuring assignment:

function sum(...values) {          // rest — gathers arguments into an array
  return values.reduce((a, b) => a + b, 0);
}
sum(...nums);                      // spread — hands them over individually

The copy is shallow

This catches people constantly. Only the top level is duplicated; nested objects are still shared:

const original = { name: "Mai", prefs: { theme: "dark" } };
const clone = { ...original };
clone.prefs.theme = "light";
original.prefs.theme;              // "light" — same nested object

Use structuredClone(original) when you need a genuinely independent copy.

Other things worth knowing

Spread works on anything iterable, which makes it a neat way to convert: [...new Set(arr)] deduplicates an array, [...document.querySelectorAll("li")] turns a NodeList into a real array, and [..."hello"] splits a string into characters. On objects it copies only own enumerable properties — prototype methods and non-enumerable keys are left behind.