35장 스프레드 문법

* 아래 내용은 이웅모 저자님의  모던 자바스크립트 Deep Dive 책(위키북스)을 정리한 내용입니다.

   저작권에 문제가 된다면 삭제하도록 하겠습니다.

 

 

ES6에서 도입된 스프레드 문법(spread syntax)은 하나로 뭉쳐 있는 여러 값들의 집합을 펼처서 개별적인 값들의 목록으로 만든다.

이터러블만 스프레드 문법을 사용할 수 있다.

스프레드 문법의 결과는 값이 아니라 값들의 목록이다.

 

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

함수의 인수 목록으로 전달해야 할 경우 사용한다.

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

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

따라서 Rest 파라미터와 스프레드 문법은 서로 반대의 개념이다.

 

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

스프레드 문법을 사용하면 간결하고 가독성 좋게 표현할 수 있다.

 

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]

 

splice

ES5에서 어떤 배열의 중간에 다른 배열의 요소들을 추가하거나 제거하려면 splice메서드를 사용한다.

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

arr1.splice(1, 0, arr2);

// 기대한 결과는 [1, [2, 3], 4]가 아니라 [1, 2, 3, 4]다.
console.log(arr1); // [1, [2, 3], 4]

 

중간에 배열을 해체하고 전달하려면 apply 메서드를 사용한다.

var arr1 = [1, 4];
var arr2 = [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]

 

배열 복사

기존에는 slice 메서드에 인자를 넣지않고 배열을 복사했다.

// 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

 

이터러블을 배열로 변환

ES5에서는 이터러블을 배열로 변환하려면 apply나 call 메서드를 사용하여 slice메서드를 호출해야했다. 이 방법은 이터러블이 아닌 유사 배열 객체도 배열로 변환할 수 있다.

// 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

 

스프레드 문법을 사용하면 간단하다.

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

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

 

Rest 파라미터를 활용하면 더 간단하다.

const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);

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

 

이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될 수 없다. 이 때는 Array.from 메서드를 사용한다.

const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

Array.from(arrayLike); // -> [1, 2, 3]

 

35.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 }

 

이전에는 ES6에서 추가된 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 });
console.log(changed); // { x: 1, y: 100 }

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

 

스프레드 문법 도입으로 간편해졌다.

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 };
// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }
console.log(changed); // { x: 1, y: 100 }

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

 

 

Reference

- 이웅모 ,  모던 자바스크립트 Deep Dive , 위키북스 , 2020