Spread vs Rest Syntax

They use the same three dots and they are two sides of the same idea: taking a group of values apart and putting them back together. The difference is the position. Spread appears where a value is expected and expands something into its individual parts. Rest appears where a parameter is expected and collects several arguments into one array.

const numbers = [1, 2, 3];

// Spread: expand an array into individual values.
const copy = [...numbers];
console.log(copy);              // [1, 2, 3]
console.log(copy === numbers);   // false - a new array was created

// Rest: collect several arguments into one array.
function sum(...values) {
  return values.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4));   // 10

// Spread also merges arrays.
const merged = [...numbers, 4, ...[5, 6]];
console.log(merged);             // [1, 2, 3, 4, 5, 6]

Rest has to be the last parameter in a list, because it collects everything left over. If you need to grab the first argument and collect the rest, you write a normal parameter first and then the rest parameter, which is a common pattern for middleware and for variadic wrappers.

Both also work on objects, not just arrays. Spreading an object copies its own enumerable properties into a new object, and a rest parameter in a destructuring pattern collects the properties you did not name.

The mental model that helps in an interview is that spread is an expression that produces multiple values and rest is a parameter that accepts multiple values. If you are on the right-hand side of an assignment or inside an argument list, you are spreading. If you are in a parameter list or a destructuring pattern, you are resting.

Two common approaches are the spread operator and the slice method, and both give you a shallow copy: a new array whose elements are the same objects as the originals.

const original = [1, 2, 3];

const copy = [...original];
copy.push(4);
console.log(original);   // [1, 2, 3] - the original is untouched
console.log(copy);       // [1, 2, 3, 4]

const another = original.slice();
another.push(5);
console.log(original);   // [1, 2, 3] - still untouched

Why it matters is that assigning an array to a second variable does not copy it. Both names then point at the same array, and a change through one is visible through the other. That is the difference between copying a reference and copying the value.

The trap to be ready for is that both of these copy only the top level. If the array holds objects, the new array holds the same object references, so mutating a property on an element changes the original too. To get a genuinely independent copy you need a deep copy, and for that you would reach for structuredClone, which is built into modern browsers and Node, rather than a JSON round trip that loses dates, maps and values that are not plain JSON.

Two more points. Spread works on any iterable, so it also spreads a string into its characters, a set into its values, and the result of a generator. And the slice method takes start and end indexes, so slice(1) copies everything from the second element onwards, which is occasionally what you actually want.

Rest parameters give you a real array, while the arguments object gives you an array-like object with array-like behaviour. The difference is not cosmetic and it shows up in practice.

function withRest(...args) {
  console.log(args.length);          // 3
  console.log(args);                 // [1, "two", true]
  console.log(Array.isArray(args));  // true
  return args;
}
withRest(1, "two", true);

function withArguments() {
  console.log(arguments.length);         // 2
  console.log(typeof arguments[0]);      // "number"
  console.log(Array.isArray(arguments)); // false - not a real array
}
withArguments(10, 20);

The arguments object has no array methods, so you cannot call map or filter on it without converting it first, usually with the spread operator or Array.from. It also behaves oddly with arrow functions, which do not have their own arguments object at all: an arrow function sees the arguments of the enclosing function, or throws in a module top-level context. Rest parameters avoid that trap entirely because the values are just ordinary parameters.

There is a second, subtler difference. In sloppy mode the arguments object is linked to the parameter list, so changing a parameter changes the matching entry in arguments and the other way round. Strict mode removed that aliasing, and rest parameters never had it.

Rest parameters also interact well with default parameters. If a parameter has a default and the caller passes nothing, the default is used and the rest array simply does not include that position. A function can combine a normal parameter, a defaulted parameter and a rest parameter, but the rest parameter must come last.

The modern advice is simple: use rest parameters rather than the arguments object in new code, and remember that a rest parameter always costs one array allocation, which is worth knowing for hot paths.