PrismitaLEARN · PRACTICE · GROW

What is the difference between the spread and rest operators?

JavaScript ES6+ Basic Fresher1–2 Yrs Coding 1 min read

Quick Answer

Both use .... Spread expands an iterable into individual elements — [...a, ...b], fn(...args), {...obj, extra: 1}. Rest collects the remaining items into one array/object — function fn(first, ...others), const [head, ...tail] = arr.

Same three dots, opposite jobs. Spread takes something iterable and spreads it out — combining arrays with [...a, ...b], cloning an object with {...obj}, passing an array as function arguments. Rest gathers up whatever's left into one array — a function that takes (first, ...rest), or destructuring with const [head, ...tail]. The one thing to remember is that spread only does a shallow copy, so nested objects are still shared.

  • Spread makes a shallow copy — nested objects are still shared references.
  • {...defaults, ...overrides} is the idiomatic merge (later keys win).
  • Rest in destructuring: const { id, ...rest } = props to split off known keys.
  • Rest parameters replace the old arguments object and are real arrays.
All JavaScript questions More on ES6+