[ES6] 비구조화 할당과 Spread & Rest

비구조화 할당

const user = { name: 'stir', password: '1234' };

const { name, password } = user; //'stir', '1234'

Spread

const user = ['stir1', 'stir2']; 

const allUser = [...user, 'stir3']; //'stir1', 'stir2', 'stir3'

Rest

const user = { name: 'stir', password: '1234', id:'constant',};
const { name, ...test2 } = user; 
console.log(name); //stir
console.log(test2); //1234, constant
//rest는 나머지라는 뜻으로 name에는 이미 할당되어 있어서 나머지는 test2에 할당된다.

 

차이점

위의 문법은 전부 객체(Object)형, 배열(Array)형 둘다 사용 가능한 문법이다.

다만, 타입의 특성마다 조금씩 차이는 존재한다. 

const arr = ["1", "2", "3", "4"]
const [firstElement, ...rest] = arr
console.log(firstElement) // "a"

위 코드의 배열형은 firstElement가 정상적으로 출력된다.

const arr = {a:'1', b:'2',}
const {firstElement, ...rest} = arr
console.log(firstElement) // undefined

하지만 객체형은 출력하지 못한다.

const arr = {a:'1', b:'2',}
const {a, ...rest} = arr
console.log(a) // 1

위 코드 처럼 객체형은 같은 객체 이름으로 받아야만 출력이 가능하다.