35장 스프레드 문법

* 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. *

 

스프레드 문법?

- ES6에서 도입된 전개 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.

- 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for.. of 문으로 순회할 수 있는 이터러블에 한정된다.

- 스프레드 문법의 결과값은 변수에 할당할 수 없다. 왜냐하면 스프레드 문법의 결과값이 값이 아니라 값들의 목록이기 때문이다.

 

스프레드 문법의 결과물을 사용하는 경우

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

Math.max 메서드를 사용할 때 숫자만 인수로 넘겨줄 수 있다. 만약 배열 요소를 max 메서드에 적용시키고 싶다면?

방법 1)

스프레드 문법 이전에는 apply 함수를 사용함

let arr = [1, 2, 3];

let max = Math.max.apply(null, arr);

참고 - apply 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Function.prototype.apply() - JavaScript | MDN

 

방법 2)

스프레드 문법 사용

const arr = [1, 2, 3];

// 스프레드 문법에 의해 펼쳐져서 실제로는 Math.max(1, 2, 3) 이렇게 실행됨
const max = Math.max(...arr);

 

참고 - Rest 파라미터 (책 26장)

형태가 스프레드 문법과 비슷해서 개념이 헷갈릴 수 있지만, Rest 파라미터는 매개변수 이름 앞에 점 세 개를 붙여서 정의한 것이다. 함수에 전달된 인수들을 배열로 전달해주는 역할을 한다.

 

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

1) concat

- concat을 사용하는 경우

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

- 스프레드 문법 사용

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

 

2) splice

- splice 사용

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

arr1.splice(1, 0, arr2); // 배열 arr1 인덱스 1 자리에 0만큼의 요소를 제거하고 arr2를 넣는다
// 결과값은 [1, [2, 3], 4]

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

Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));
// apply 첫번째 인자인 arr1은 this가 되고, 인덱스 1에서 0개의 요소를 제거하고 그 자리에 arr2를 넣는다고 보면 된다.

- 스프레드 문법 사용

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

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

 

3) 배열 복사

- slice 사용

let origin = [1, 2];
let copy = origin.slice();

- 스프레드 문법 사용

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

 

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

- apply, call, slice 메서드 사용

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

console.log(sum(1, 2, 4)); // 7

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

const arr = Array.prototype.slice.call(arrayLike); // -> [1, 2, 3]

- 스프레드 문법 사용 (유사 배열 객체는 스프레드 문법 사용 불가능)

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

console.log(sum(1, 2, 4)); // 7

// 위의 예제보다 나은 방법 = Rest 파라미터 사용
const sum = (...args) => args.reduce((pre, cur) => pre + cur, 0);

 

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

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

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

프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖는다.

const changed = { ...{ x: 1, y: 2 }, y: 100 };
console.log(changed); // { x: 1, y: 100 }