...은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는것
대상 -> Array String Map Set DOM 컬렉션 (HTML Collection, NodeList)

// ...[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

스프레드 문법의 결과는 값이 아니다

1. 배열 인수 목록에서 사용

const arr = [1,2,3];

console.log(Math.max.apply(null, arr));	//3
console.log(Math.max(...arr)); //3

2. 배열 리터럴 내부에서 사용

• concat 배열 두개를 이어줌

• splice 중간에 추가
  단, 객체 자체가 인수로 들어갈 수 있으므로 주의 해야함

// ES5
var arr1 = [1, 4];
var arr2 = [2, 3];
var arr3 = [1, 4];

// 세 번째 인수 arr2를 해체하여 전달해야 한다.
// 그렇지 않으면 arr1에 arr2 배열 자체가 추가된다.
arr1.splice(1, 0, arr2);

// 기대한 결과는 [1, [2, 3], 4]가 아니라 [1, 2, 3, 4]다.
console.log(arr1); // [1, [2, 3], 4]

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

• slice 복사
  대신, 스프레드를 쓰면 더 가독성이 높아짐

• Array.prototype.slice.call

const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
};

const arr = Array.prototype.slice.call(arrayLike);
console.log(Array.isArray(arr)) //true

3. 객체 리터럴 내부에서 사용

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy); // { x: 1, y: 2 }
console.log(obj === copy); // false

// 객체 병합
const merged = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4 }

// 객체 병합. 프로퍼티가 중복되는 경우, 뒤에 위치한 프로퍼티가 우선권을 갖는다.
const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });
console.log(merged); // { x: 1, y: 10, z: 3 }

// 특정 프로퍼티 변경
const changed = Object.assign({}, { x: 1, y: 2 }, { y: 100 });
console.log(changed); // { x: 1, y: 100 }

// 프로퍼티 추가
const added = Object.assign({}, { x: 1, y: 2 }, { z: 0 });
console.log(added); // { x: 1, y: 2, z: 0 }