Vanilla JS - 비구조화 할당(destructuring)

var candyMachine = {
    status: {
        name: 'node',
        count: 5,
    },
    getCandy: function(){
        this.status.count--;
        return this.status.count;
    }
}
​
var status = candyMachine.status;
var getCandy = candyMachine.getCandy;

var status = candyMachine.status;

위와 같이 변수이름과 속성이름이 같을때 ES2015에선 간단하게 표현할 수 있는 문법을 제공한다.

const a = 객체.a const b = 객체.b

const { a,b } = 객체

const candyMachine = {
    status: {
        name: 'node',
        count: 5,
    },
    getCandy(){
        this.status.count--;
        return this.status.count;
    }
}
​
const {status,getCandy} = candyMachine;

단, 비구조화 할당시 this가 의도와 다르게 동작할 수 있다.

const candyMachine = {
    status: {
        name: "node",
        count: 5,
    },
    getCandy(){
        this.status.count--;
        return this.status.count;
    }
}
​
candyMachine.getCandy(); // 4
​
const {status,getCandy} = candyMachine;
getCandy(); // undefined
​
getCandy.call(candyMachine); // 3

기존 처럼 candyMachine.getCandy(); 호출하면 candyMachine.에 의해 this를 찾는데,

getCandy();이렇게 호출하면 this를 찾지 못한다. (구조분해 할당으로 분리가 됨)

배열의 비구조화 할당

var array = ['nodeJs', {}, 10, true];
​
var node = array[0];
var obj = array[1];
var bool = array[array.length - 1];

const array = ['nodeJs', {}, 10, true];
​
const [node, obj, , bool] = array;

REST 문법 (배열)

순서대로 넣는게 아니라, 남은 요소를 다 넣고을땐 아래처럼 하면 된다.

rest로 여러개의 변수를 모아서 배열로 만든다.

const array = ['nodeJs', {}, 10, true];
​
const [node, obj, ...bool] = array;
bool; // [10, true]

const m = (x,y) => console.log(x,y);
m(5,6) // 5, 6
m(5,6,7,8,9) // 5, 6
​
const n = (x, ...y) => console.log(x,y);
n(5,6,7,8,9) // 5, [6,7,8,9]