es5에선 argument객체를 사용한다. 객체는 유사배열객체이며 형태는

// ES5
var foo = function () {
  console.log(arguments);
};

foo(1, 2); // { '0': 1, '1': 2 }

spread문법 사용하면

// ...[1, 2, 3]는 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]) // 1, 2, 3

apply와call의 차이점: apply는 두 번째 매개변수를 배열 형태로 넣어준다. 분해해서 인자로 사용됨

Rest 파라미터는 반드시 마지막 파라미터이어야 하지만 Spread 문법을 사용한 인수는 자유롭게 사용할 수 있다.

배열 등을 분해하여 전달할 때 apply를 사용했는데 Spread 문법을 사용하면 apply를 사용하지 않아도 된다.

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

//ES5
// apply 메소드의 2번째 인자는 배열. 이것은 개별 인자로 push 메소드에 전달된다.
Array.prototype.push.apply(arr1, arr2);
Array.prototype.splice.apply(arr1, [3, 0].concat(arr2));

//ES6
arr1.push(...arr2); // == arr1.push(4, 5, 6);
arr1.splice(3, 0, ...arr2);

console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]

원래 spread는 객체에 대해서 사용할 수 없으나 객체 안에선 객체에 대하여 작동을 한다.

// 객체 리터럴 Rest/Spread 프로퍼티
// Spread 프로퍼티
const n = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

// Rest 프로퍼티
const { x, y, ...z } = n;
console.log(x, y, z); // 1 2 { a: 3, b: 4 }