Spread Syntax

배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장

1. 일반적으로 배열의 엘리먼트를 함수의 인수로 사용하고자 할 때 Function.prototype.apply() 를 사용했지만, 이를 대체 가능

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

2. new를 사용해 생성자를 호출 할 때, 배열과 apply (apply 는 [[Call]] 을 하지만 [[Construct]] 는 그렇지 않음) 를 직접 사용하는 것은 불가했습니다. 하지만, 전개 구문 덕분에 배열을 new 와 함께 쉽게 사용

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

3. 이미 존재하는 배열을 기준으로, 새로운 배열을 만들고자 하는 경우(push, splice, concat의 대체)

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

var arr = [1, 2, 3];
var arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);

// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

4. object의 복제나 병합하고자 하는 경우

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

유의 사항

• 전개 구문 (spread 프로퍼티인 경우 제외) 은 iterable 객체에만 적용

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable