[ 모던 자바스크립트 스터디 ] 스프레드 문법

스프레드 문법 ... 은 ES6에서 도입되었고,

하나로 뭉쳐있는 여러 값들의 집합을 펼쳐 개별적인 값들의 목록으로 만든다.

 

스프레드 문법은 이터러블들만(Array, String, Map, ... ) 사용 가능하다.

 

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

console.log(...'Hello'); // H e l l o

 

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

따라서 아래와 같이 변수에 할당할 수 없다는 것을 알아둬야한다.

 

const list = ...[1, 2, 3]; // SyntaxError: Unexpected token ...

 

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

 

const arr = [1, 2, 3];

const max = Math.max(arr); // NaN
Math.max(1, 2); // 2
Math.max(1, 2, 3); // 3

Math.max(...arr); // 3

 

 

Rest 파라미터와 혼동할 수 있으나,

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 받기 위한 개념이라는 것을 알아두면 되겠다.

 

둘이 반대되는 개념이다.

 

 

 

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

 

concat

 

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(arr2); // [1, 2, 3, 4]

 

 

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

 

스프레드 문법의 대상은 이터러블이어야 하지만, 스프레드 프로퍼티 제안은

일반 객체를 대상으로도 스프레드 문법을 사용할 수 있게끔 한다.

 

const obj = {x: 1, y:2};
const copy = {...obj}

 

스프레드 프로퍼티가 제안되기 이전에는 ES6 에서 도입된 Object.assign 메서드를 사용해

여러 개의 객체를 병합했다.

 

책에서 마침 이 부분을 언급해준 덕분에, 현재 내가 개발하고 있는 소스에서 사용되는

Object.assign 을 제거하고 좀 더 보기 좋게 스프레드 문법을 적용했다.

직접적으로 활용되니 짜릿합니다,,,

 

const merged = { ...{x: 1, y: 2} , ...{y: 10, z: 3}};
console.log(merged); // {x:1, y: 10, z:3}