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

스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for … of 문으로 순회할 수 있는 이터러블에 한정된다.

스프레드 문법의 결과물은 값으로 사용할 수 없고, 아래와 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

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

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

스프레드 문법이 제공되기 이전에는 배열을 펼쳐서 요소들의 목록을 함수의 인수로 전달하고 싶은 경우, Function.prototype.apply를 사용했다.

/* ES5 */
var arr = [1, 2, 3];
var max = Math.max.apply(null, arr);  // -> 3

스프레드 문법을 사용하면 더 간결하고 가독성이 더 좋다.

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

스프레드 문법과 Rest 파라미터의 형태가 동일하므로 혼동에 주의해야 한다.

function foo(...rest) {
	console.log(rest);  // 1, 2, 3 -> [1, 2, 3]
}

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

스프레드 문법은 여러 개의 값이 하나로 뭉쳐 있는 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 …을 붙인다.

→ 스프레드 문법과 Rest 파라미터는 서로 반대의 개념이라고 볼 수 있다.

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

스프레드 문법을 배열 리터럴에서 사용하면 더욱 간결하고 가독성 좋게 표현할 수 있다.

35.2.1 concat

ES5에서 2개의 배열을 1개의 배열로 결합하고 싶은 경우 배열 리터럴만으로 해결할 수 없고 concat 메서드를 사용해야 한다.

/* ES5 */
var arr = [1, 2].concat([3, 4]);
console.log(arr);  // [1,2,3,4]

스프레드 문법을 사용하면 별도의 메서드를 사용하지 않고 배열 리터럴만으로 결합할 수 있다.

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

35.2.2 splice