spread_and_rest.md

...spread and ...rest

Spread takes a collection of something, like []s or {}s, and applies them to something else that accepts , separated arguments, like functions, []s and {}s.

For example:

const add = (a, b) => a + b;
let args = [3, 5];
add(...args); // same as `add(args[0], args[1])`, or `add.apply(null, args)`

Functions aren't the only place in JavaScript that makes use of comma separated lists - []s can now be concatenated with ease:

let cde = ['c', 'd', 'e'];
let scale = ['a', 'b', ...cde, 'f', 'g']; // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

Similarly, object literals can do the same thing:

let mapABC  = { a: 5, b: 6, c: 3};
let mapABCD = { ...mapABC, d: 7}; // { a: 5, b: 6, c: 3, d: 7 }

...rest arguments share the ellipsis like syntax of rest operators but are used for a different purpose. ...rest arguments are used to access a variable number of arguments passed to a function. For example:

function addSimple(a, b) {
  return a + b;
}

function add(...numbers) {
  return numbers[0] + numbers[1];
}

addSimple(3, 2);  // 5
add(3, 2);        // 5

// or in es6 style:
const addEs6 = (...numbers) => numbers.reduce((p, c) => p + c, 0);

addEs6(1, 2, 3);  // 6

Technically JavaScript already had an arguments variable set on each function (except for arrow functions), however arguments has a lot of issues, one of which is the fact that it is not technically an array.

...rest arguments are in fact arrays. The other important difference is that rest arguments only include arguments not specifically named in a function like so:

function print(a, b, c, ...more) {
  console.log(more[0]);
  console.log(arguments[0]);
}

print(1, 2, 3, 4, 5);
// 4
// 1