35. 스프레드 문법

• ... (전개 문법, spread syntax) : ES6 도입된 스프레드 문법
• 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듦
• for ... of 문으로 순회할 수 있는 이터러블 한정
  • Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments 등
• 스프레드 문법은 값을 반환하지 않음
• 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능
  • 1. 함수 호출문의 인수 목록
  • 2. 배열 리터럴의 요소 목록
  • 3. 객체 리터럴의 프로퍼티 목록

35.1. 함수 호출문의 인수 목록

• 값을 개별적으로 전달해야 하는 경우
  • Math.max([1, 2, 3]); // NaN
  • Math.max(...[1, 2, 3]); // 3
• Rest 파라미터와 혼동 주의
  • Rest 파라미터는 함수에 전달된 인수들을 배열로 전달받기 위해 사용
• 스프레드 문법은 배열 등의 이터러블을 펼쳐서 개별적인 값들로 만듦

35.2. 배열 리터럴 내부

35.2.1. concat

• concat : 2개 이상의 배열을 하나의 배열로 합치는 경우 사용
• 스프레드 문법을 통해 동일하게 사용 가능

35.2.2.splice

• splice : 배열 중간에 다른 요소를 추가하거나 제거하는 경우 사용
• 세 번째 인수로 배열을 전달하면 배열 자체가 추가됨
  • 중첩 배열 생성
• 스프레드 문법으로 전달하면 해체되어 전달됨

const arr1 = [1, 4];
const arr2 = [2, 3];
arr1.splice(1, 0, arr2); // [1, [2, 3], 4]
arr1.splice(1, 0, ...arr2); // [1, 2, 3, 4]

35.2.3. 배열 복사

• 기존 배열 복사를 위해 slice 메서드 사용
• 스프레드 문법으로 사용 가능
• 각 요소를 얕은 복사하여 새로운 복사본 생성

35.2.4. 이터러블을 배열로 변환

• 기존 이터러블 또는 유사 배열 객체를 배열로 변환하려면 Function.prototype.apply 또는 Function.prototype.call 메서드와 slice 메서드 함께 사용
• 스프레드 문법으로 간편하게 가능
  • [...arguments].reduce ~~
  • 유사 배열 객체는 사용 불가
• Rest 파라미터로도 가능

35.3. 객체 리터럴 내부

• ECMAScript 2018에서 추가된 객체 리터럴의 스프레드 프로퍼티 사용 가능

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

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

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

[출처] 모던 자바스크립트, Deep Dive