ES6에 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들을 펼쳐서 개별적인 값들의 목록으로 만든다.

스프레드 문법 사용 대상은 이터러블에 한정된다.

console.log(...[1,2,3]); // 1 2 3
console.log(...'hello'); // h e l l o

const list = ...[1,2,3]; // SyntaxError

스프레드 문법의 결과는 값이 아니다. 따라서 스프레드 문법의 결과는 변숭 할당할 수 없다.

아래 문맥에서 사용 가능

• 함수 호출문의 인수 목록
• 배열 리터럴의 요소 목록
• 객체 리터럴의 프로퍼티 목록

함수 호출문의 인수 목록에서 사용하는 경우

const arr = [1,2,3];
const max = Math.max(...arr); // 3

스프레드 문법은 Rest 파라미터와 형태가 동일하여 혼동할 수 있으므로 주의할 필요가 있다.

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받기 위해 이름 앞에 ...을 붙이고, 스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것이다. 서로 반대의 개념이다.

// Rest 파라미터
function foo(...rest) {
  console.log(rest);
}

foo(...[1,2,3]);

배열 리터럴 내부에서 사용하는 경우

const arr = [...[1,2], ...[3,4]];
console.log(arr); // [1,2,3,4]

const arr1 = [1,4];
const arr2 = [2,3];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1,2,3,4]

객체 리터럴 내부에서 사용하는 경우

아직 공식은 아니고 제안 단계. 책 참조