스프레드 문법(전개 문법)은 하나로 뭉쳐있는 여러값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다(ex : [1, 2, 3] → 1, 2, 3). 이때, 1, 2, 3은 값이 아니라 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다 → 스프레드 문법은 연산자가 아니다.

스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다. 이터러블이 아닌 유사배열 객체는 스프레드 문법의 대상이 될 수 없다.

스프레드 문법의 쓰임

• concat, splice 사용시

• 이터러블을 배열로 변환

  function sum() {
  	// 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
  	return [...arguments].reduce((pre, cur) => pre + cur, 0);
  }
  console.log(sum(1, 2, 3)); // 6
  

  위 예제보다 나은 방법은 Rest 파라미터를 사용하는 것이다.

  // Rest 파라미터 args는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
  const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);
  console.log(sum(1, 2, 3)); // 6
  

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

스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다. 스프레드 문법의 대상은 이터러블이어야 하지만, 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용한다.

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
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 }