Spread Syntax vs Rest Parameter: Understanding the Difference

In ES2015, two new features, spread syntax and rest parameters, provide powerful ways to manipulate arrays and objects. While both may seem similar, they serve distinct purposes and each has its own unique functionality.

Spread Syntax

Spread syntax (represented by three dots "...") allows you to spread or expand an iterable (such as an array or object) into individual elements within another iterable. This feature enables you to conveniently merge or combine multiple arrays or objects into a new one.

For example, let's consider the following code:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

In this snippet, the ...abc and ...def spread syntax expand the abc and def arrays into individual elements, creating a new alpha array containing all the elements from both arrays.

Rest Parameter

On the other hand, a rest parameter (denoted by three dots "...", preceded by an identifier) collects any remaining arguments passed to a function into a single array. The rest parameter must be the last parameter in the function's parameter list.

An example of a rest parameter in action is as follows:

function sumAll(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total  = num;
  }
  return total;
}

let result = sumAll(1, 2, 3, 4, 5);
console.log(result); // result == 15

In this code, the ...numbers rest parameter collects the remaining arguments passed to the sumAll function (in this case, 1, 2, 3, 4, and 5) and creates a single numbers array.