[ES6] Spread(...) 문법, 비구조화 할당 문법

Spread(...) 문법의 2가지 용도

1. 첫번째  Rest 기능

const object = {a: 1, b: 2 , c: 3};

const {a, b, ...objRest} = object;

console.log(a, b, objRest); // 1, 2 { c: 3 }

 

const array = [1,2,3,4,5];

const [c, d, ...arrayRest] = array;

console.log(c, d, arrayRest); // 1, 2 [3,4,5]

 

앞에 … 를 써주를 명시하면 배열이라면 나머지 원소들을 배열로 만들어 

 

오브젝트라면 열거할수 있는 나머지 프로퍼티들을 묶어 오브젝트로 반환합니다.

 

2. 두번쨰 Spread 기능(병합 기능) : Object.assign({}, {})와 유사

 

const a = [1,2,3];

const aa = [...a, ...a];

 

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

 

Rest Operator와 반대되는 의미라고 해석하면 될것같습니다.

 

앞에 … 를 써주을 명시하면 배열이라면 원소들을 나열하고,

 

오브젝트라면 열거할수 있는 프로퍼티들을 나열합니다.

오브젝트의 프로퍼티 나열할때 똑같은 프로퍼티가 있다면 뒤에 쓴걸로 덮어쓰기됩니다.

 

ES6 문법 중 ...(spread 문법)이란?

- "객체 또는 리스트의 내용을 모두 펼쳐서 기존 객체를 복사"해준다.

- ...객체A -> 객체A의 양쪽 끝의 { }를 제거해준다와 동일한 의미로 해석해도 좋다.

ex) const obj = {...{a:1, b:2}, ...{b:3, c:4}} // {a:1, b:3, c:4}

- ...리스트A  -> 리스트A의 양쪽 끝의 []을 제거해준다와 동일한 의미로 해석해도 좋다.

ex) const list = [...[1,2,3],...[4,5,6]] // [1,2,3,4,5,6]

- const 객체B = {...객체A} 형식으로 사용될 경우, 객체B는 객체A에서 { }을 제거해주고, 값이 복사된 새로운 객체가 생성된다.

- React, Augular 등 모던 SPA 프론트엔드 프레임워크에서, 기존값을 가진 새로운 객체를 복사하기 위해 주로 사용된다.