35장. 스프레드 문법

• ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산, spread) 개별적인 값들의 목록으로 만듬.

• 사용할 수 있는 대상은 이터러블에 한정됨.

  console.log(...[1, 2, 3]);  // 1 2 3
  console.log(...'Hello');  // H e l l o
  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 list = ...[1, 2, 3];  // SyntaxError: Unexpected token ...

📁 함수 호출문의 인수목록에서 사용

• 배열을 펼쳐서 요소들의 목록을 함수의 인수로 전달하고 싶은경우

  const arr = [1, 2, 3];
  
  const max = Math.max(...arr);  // -> 3

• Rest 파라미터와 형태가 동일하여 혼동할 수 있으나, Rest 파라미터와 스프레드 문법은 서로의 반대의 개념.

  // Rest 파라미터는 인수들의 목록을 배열로 전달받음
  function foo(...rest) {
    console.log(rest);  // 1, 2, 3 -> [1, 2, 3]
  }
  
  // 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만듬
  foo(..[1, 2, 3]);  // [1, 2, 3] -> 1, 2, 3

📁 배열 리터럴 내부에서 사용

1. concat

• ES5에선 배열을 결합하고 싶은 경우 concat 메서드를 사용해야 했었음.

  // ES5
  var arr = [1, 2].concat([3, 4]);
  console.log(arr);  // [1, 2, 3, 4]
  
  // ES6
  const arr = [...[1, 2], ...[3, 4]];
  console.log(arr);  // [1, 2, 3, 4]

2. splice

• 배열의 중간에 다른 배열의 요소를 추가하거나 제거하려면 splice 메서드를 사용함. 이때 splice 메서드의 세 번째 인수로 배열을 전달하면 배열 자체가 추가됨.

  // ES5
  const arr1 = [1, 4];
  const arr2 = [2, 3];
  
  // 세 번째 인수 arr2를 해제하여 전달해야 함.
  // 그렇지 않으면 arr1에 arr2 배열 자체가 추가됨.
  arr1.splice(1, 0, ...arr2);
  console.log(arr1);  // [1, 2, 3, 4]

3. 배열 복사

• 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본 생성.

  const origin = [1, 2];
  const copy = [...origin];
  
  console.log(copy);  // [1, 2]
  console.log(copy === origin);  // false

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

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

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

• 이터러블이 아닌 유사 배열 객체를 배열로 변경시에는 Array.from 메서드 사용.

📁 객체 리터럴 내부에서 사용

• 스프레드 문법의 대상은 이터러블이어야 하지만, 스프레드 프로퍼티 제안으로 일반 객체를 대상으로도 스프레드 문법의 사용을 허용.

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