Spread and Rest Operators

The ... syntax means two different things depending on where it's used: spreading an existing value out, or gathering multiple values into one.

const arr1 = [1, 2];
const merged = [...arr1, 3, 4]; // [1, 2, 3, 4]

const original = { a: 1, b: 2 };
const copy = { ...original, b: 5 }; // { a: 1, b: 5 }

function sum(...nums) {
  return nums.reduce((t, n) => t + n, 0);
}
sum(1, 2, 3); // 6

Inside an array or object literal, or a function call, ... spreads an iterable's elements (or an object's own enumerable properties) out individually — this is how copy above becomes a shallow clone of original with b overridden.

Inside a function's parameter list, ...nums does the opposite — it collects any remaining arguments into a real array, replacing the old, array-like-but-not-quite arguments object with something you can call .map() or .reduce() on directly.