35. 스프레드 문법

스프레드 문법(전개 문법) ...

하나로 뭉쳐 있는 여러 값들의 집합을 전개하여 개별적인 값들의 목록으로 만듦
스프레드 문법 사용 가능 대상은 for ... of 문으로 순회 가능한 이터러블에 한정됨
(Array, String, Map, Set, DOM 컬렉션, arguments ...)

 

스프레드 문법의 결과물은 값이 아니라 값들의 목록이기 때문에 변수에 할당 불가능

다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용 가능

1. 함수 호출문의 인수 목록
2. 배열 리터럴의 요소 목록
3. 객체 리터럴의 프로퍼티 목록

---

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

요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후

이를 함수의 인수 목록으로 전달해야 하는 경우

const arr = [1, 2, 3];

// 스프레드 문법을 사용하여 배열 arr을 1, 2, 3으로 펼쳐서 Math.max에 전달
// Math.max(...[1, 2, 3])은 Math.max(1, 2, 3)과 같음
const max = Math.max(...arr); // 3

 

Rest 파라미터

함수에 전달된 인수들의 목록을 배열로 전달받기 위해 사용
매개변수 이름 앞에 ...을 붙임
스프레드 문법과 형태가 동일함
Rest 파라미터와 스프레드 문법은 반대의 개념

// Rest 파라미터는 인수들의 목록을 배열로 전달받음
function foo(...rest) {
  console.log(rest); // 1, 2, 3 -> [1, 2, 3]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만듦
// [1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);

---

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

1. concat

2개의 배열을 1개의 배열로 결합하고 싶은 경우 concat 메서드 사용

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

 

스프레드 문법 사용 시 배열 리터럴만으로 2개의 배열을 1개의 배열로 결합 가능

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

 

2. splice

배열의 중간에 다른 배열의 요소들을 추가하거나 제거할 경우 splice 메서드 사용

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

// apply 메서드의 2번째 인수는 apply 메서드가 호출한 splice 메서드의 인수 목록
// 2번째 인수 [1, 0].concat(arr2)는 [1, 0, 2, 3]으로 평가됨
// splice 메서드에 apply 메서드의 2번째 인수 [1, 0, 2, 3]이 해체되어 전달됨
// arr1[1]부터 0개의 요소를 제거하고 그 자리에 새로운 요소(2, 3)를 삽입함
Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));
console.log(arr1); // [1, 2, 3, 4]

 

스프레드 문법을 사용하면 간결하게 표현 가능

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

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

 

3. 배열 복사

// ES5
var origin = [1, 2];
var copy = origin.slice();

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

// ES6
const origin = [1, 2];
const copy = [...origin];

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

slice 메서드, 스프레드 문법 모두

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

 

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

// ES5
function sum() {
  // 이터러블이면서 유사 배열 객체인 arguments를 배열로 변환
  var args = Array.prototype.slice.call(arguments);
  
  return args.reduce(function (pre, cur) {
    return pre + cur;
  }, 0);
}

console.log(sum(1, 2, 3)); // 6

// ES5
// 이터러블이 아닌 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

const arr = Array.prototype.slice.call(arrayLike); // [1, 2, 3]
console.log(Array.isArray(arr)); // true

 

스프레드 문법을 사용하면 더 간편하게 이터러블을 배열로 변환 가능

arguments 객체는 이터러블이면서 유사 배열 객체이기 때문에 스프레드 문법 대상이 될 수 있음

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 arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

const arr = [...arrayLike];
// TypeError: object is not iterable

 

이터러블이 아닌 유사 배열 객체를 배열로 변경하려면

Array.from 메서드를 사용하면 됨

// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환함
Array.from(arrayLike); // [1, 2, 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 }

 

스프레드 프로퍼티 제안 이전에는

Object.assign 메서드를 사용해 여러 개의 객체를 병합하거나 특정 프로퍼티를 변경/추가했음

// 객체 병합. 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 가짐
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 });

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

 

스프레드 프로퍼티는 Object.assign 메서드를 대체할 수 있는 간편한 문법임

// 객체 병합. 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 가짐
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 };

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