[딥다이브] 35. 스프레드 문법

스프레드 문법을 사용할 수 있는 대상: 이터러블

 

스프레드 문법은 값이 아닌 값들의 목록을 만듦

- 함수 호출문의 인수 목록

- 배열 리터럴의 요소 목록

- 객체 리터럴의 프로퍼티 목록 

 

Rest 파라미터와 반대 개념

 

35.1 함수 호출문의 인수 목록에서 사용하는 경우

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

// 스프레드 문법 제공 이전
Math.max.apply(null, arr);

 

35.2 배열 리터럴 내부에서 사용하는 경우

기존 방식보도 간결하고 가독성 좋게 표현할 수 있음

 

1. concat

[1, 2].concat([3, 4]);

[...[1, 2], ...[3, 4]);

 

2. splice

const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, arr2); // [1, [2, 3], 4] 의도와 다름
Array.prototype.splice.apply(arr1, [1, 0].concat(arr2)); // [1, 2, 3, 4]

arr1.splice(0, 1, ...arr2)

 

3. 배열 복사

const origin = [1, 2];

origin.slice();

[...origin];

 

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

function sum() {
  const args = Array.prototype.slice.call(arguments);
  
  return args.reduce((pre, cur) => pre + cur, 0)
}

// spread
function sum() { 
  return [...arguments].reduce((pre, cur) => pre + cur, 0)
}

// rest
function sum(...args) { 
  return args.reduce((pre, cur) => pre + cur, 0)
}

// 이터러블이 아닌 유사 배열 객체인 경우
Array.from(arrayLike);

 

35.3 객체 리터럴 내부에서 사용하는 경우

2021.01 TC39 프로세스의 stage 4(Finished) 단계 스프레드 제안

이터러블이 아닌 일반 객체 대상으로 스프레드 문법 사용 허용

Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });

{...{ x: 1, y: 2 }, ...{ y: 10, z: 3 }};