스프레드 문법

ES6에서 도입된 스프레드 문법spread syntax(전개문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다.
스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), argument와 같이 for...of 문으로 소화할 수 있는 이터러블에 해당된다.

// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(-> 1, 2, 3).
console.log(...[1, 2, 3]); // 1 2 3

// 문자열은 이터러블이다.
console.log(...'Hello'); // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([ ['a', '1'], ['b', '2'] ])); // ['a', '1'] ['b', '2']
console.log(...new Set([1, 2, 3])); // 1 2 3

// 이터럴이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.
console.log(...{a: 1, b: 2}); // TypeError: Found non-callable @@iterator

스프레드 문법의 결과는 값이 아니므로, 스프레드 문법...이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다.

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

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

요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다.

const arr = [1, 2, 3];

// 배열 arr의 요소 중에서 최대값을 구하기 위해 Math.max를 사용한다.
const max = Math.max(arr); // -> NaN

Math.max(1);		// 1
Math.max(1, 2);		// 2
Math.max(1, 2, 3);	// 3
Math.max();			// -Infinity

Math.max 메서드는 매개변수 개수를 확정할 수 없는 가변 인자 함수다. 개수가 정해져 있지 않은 여러 개의 숫자를 인수로 전달받아 인수 중에서 최대값을 반환한다. 숫자가 아닌 배열을 인수로 전달하면 최대값을 구할 수 없으므로 NaN을 반환한다.

ES6 이전에는 배열을 펼처서 요소들의 목록을 함수의 인수로 전달하고 싶은 경우 Function.prototype.apply를 사용했다.

var arr = [1, 2, 3];

// apply 함수의 2번째 인수(배열)는 apply 함수가 호출하는 함수의 인수 목록이다. 따라서 배열이 펼쳐져서 인수로 전달되는 효과가 있다.
var max = Math.max.apply(null, arr); // 3

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

const arr = [1, 2, 3];

// 스프레드 문법을 사용하여 배열 arr을 1, 2, 3으로 펼쳐서 Math.max에 전달한다.
const max = Math.max(...arr); // 3

Rest 파라미터와 형태가 동일하지만, 스프레드 문법과 Rest 파라미터는 서로 반대의 개념이다.

출처 : 모던 자바스크립트 Deep Dive -이웅모 지음