All 10 Destructuring, Spread & Rest questions
More in Destructuring, Spread & Rest
How do you destructure values out of an array? How do you destructure properties out of an object? What does the spread operator (...) do when used on an array? How do you assign default values while destructuring? How do you use spread to shallow-copy and merge objects? How do you destructure nested objects and arrays in one statement? Why must the rest element be the LAST element in a destructuring pattern? How can you use destructuring to swap two variables without a temporary variable? How do computed property names interact with object destructuring?
Advertisement
JavaScript › Destructuring, Spread & Rest

How does the rest parameter differ from the spread operator, even though they use the same '...' syntax?

Intermediate

Answer

Rest COLLECTS multiple arguments/elements INTO an array (used in function parameters or destructuring patterns); spread EXPANDS an array/iterable OUT into individual elements (used in calls or array/object literals). They're opposite operations sharing identical syntax.
function sum(...nums) { // rest: collects args into an array
  return nums.reduce((a, b) => a + b, 0);
}
sum(...[1, 2, 3]); // spread: expands array into args -> 6
Real-world example Rest to accept a variable number of arguments in a logging function; spread to pass an array of arguments to Math.max().

Common follow-ups: Can rest and spread be used together in the same function?

Functional Programming
All 10 Destructuring, Spread & Rest questions