[Deep Dive] 35장 - 스프레드 문법

ES6

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서

개별적인 값들의 목록으로 만든다.

for ... of 문으로 순회할 수 있는 이터러블에 한정된다.

 

스프레드 문법의 결과물은 값으로 사용할 수 없고

쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

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

 

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

Math.max

 

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

스프레드 문법을 배열 리터럴에서 사용하면

ES5에서 사용하는 기존의 방식보다 더욱 간결하고 가독성 좋게 표현할 수 있다.

2-1. concat

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

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

 

2-2. splice

ES5에서는 어떤 배열의 중간에 다른 요소들을

추가하거나 제거하려면 slice 메서드를 사용한다.

세 번째 인수로 배열을 전달하면 배열 자체가 추가된다.

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

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


// ES6
// 이렇게 되어야 한다.
arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

 

2-3. 배열 복사

ES5에서 배열을 복사하려면 slice 메서드를 사용한다.

 

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

ES5에서 이터러블을 배열로 변환하려면

Function.prototype.apply 또는 call 메서드를 사용하여 slice메서드를 호출해야 한다.

 

스프레드 문법을 사용하면

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 메서드 사용

유사 배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환하여 반환

 

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

스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다.

 

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2};
const copy = { ...obj };
console.log(copy); // { x:1, y:2 }
console.log(obj === copy); // false

// 객체 병합
const merge = { x: 1, y: 2, ...{ a: 3, b: 4} };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4 }

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

ES6에서 도입된 Object.assign 메서드를 사용하여

여러 개의 객체를 병합하거나

특정 프로퍼티를 변경 또는 추가했다.

 

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