모던 자바스크립트 Deep Dive: 35장 스프레드 문법

35장 스프레드 문법

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

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

스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.

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

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

console.log(...[1,2,3]); // 1 2 3

예전에 배운 Rest 파라미터와는 서로 반대의 개념으로 Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo(...rest){
  console.log(rest); // [1,2,3]
}
foo(...[1,2,3]);

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

const arr = [1,2,3];

const Max = Math.max(arr); //NaN
const max = Math.max(...arr); //3

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

스프레드 문법을 배열 리터럴에서 사용하면 ES5에서 사용하던 기존의 방식보다 간결하고 가독성 좋게 표현할 수 있다.

35.2.1 concat

var arr = [1,2].concat([3,4]);
var arr2 = [...[1,2],...[3,4]];

35.2.2 splice

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

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

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

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

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

35.2.3 배열 복사

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

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

이때 원본 배열의 각 요소를 얕은 복사하여 새로운 복사본을 생성한다.

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

https://github.com/tc39/proposal-object-rest-spread 에 제안되어있는 스프레트 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있다.

const obj - { x:1,y:2 };
const copy = {...obj};
console.log(obj === copy);

const merged = {x:1,y:2, ...{a:3,b:4}};
console.log(merged);