2. Javascript ES2015 (4) - 구조 분해 할당

 

 

 

 

 

 

구조 분해 할당을 사용하면, 객체와 배열로부터 속성 / 요소를 쉽게 꺼낼 수 있습니다. 우선 예를 들어서 바로 살펴보도록 하겠습니다. 아래 예제에서는, candyMachine이라는 객체에 할당된 속성 중 getCandy라는 함수 속성, 그리고 status 속성 내의 count라는 속성을 - 동일한 이름을 가진 전역 변수에 할당하는 코드입니다. (함수 자체를 할당하는 것입니다! 리턴 값을 할당하는 것이 아니기에 실행하지는 않습니다)

 

var candyMachine = {
    status: {
        name: 'node',
        count: 5
    },
    // 호출 객체의 count를 1 감소하고 리턴한다.
    getCandy: function(){
        this.status.count--;
        return this.status.count;
    },
};

var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;

console.log(getCandy);
console.log(count);

/* 출력
ƒ (){
        this.status.count--;
        return this.status.count;
    }
5
*/

 

 

이제 위의 마지막 라인, var getCandy = ... 라인과 var count = ...를 아래와 같이 변경해 보겠습니다. 사실 듣지도 보지도 못한 코드라서 당황스러울 수 있지만, 잘 확인해 보시기 바랍니다. 

 

var candyMachine = {
    status: {
        name: 'node',
        count: 5
    },
    // 호출 객체의 count를 1 감소하고 리턴한다.
    getCandy: function(){
        this.status.count--;
        return this.status.count;
    },
};

const { getCandy, status: { count } } = candyMachine;

console.log(getCandy);
console.log(count);

/ *출력
ƒ (){
        this.status.count--;
        return this.status.count;
    }
5
*/

 

 

뭔가 이상해보이는 문법이지만, 정상적으로 작동합니다. candyMachine 객체에 있는 속성을 찾아서, 해당 변수와 매칭을 자동으로 진행하게 됩니다. 단, 이 구조 분해 할당 기능을 사용하게 되면 this 바인딩이 달라질 수 있습니다. 이 경우에는 bind 함수를 사용해줘야 합니다.

 

 

 

 

---

 

 

 

위에서 객체에서의 구조 분해 할당 과정을 살펴보았습니다. 이번에는 배열에서 이를 적용해서 사용하는 예제를 살펴보도록 하겠습니다. 아래 예제는, 어떤 배열의 원소를 특정 변수에 대입하는 과정을 나타낸 코드입니다. 

 

var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3];

console.log(node);
console.log(obj);
console.log(bool);

/* 출력
nodejs
{}
true
*/

 

 

이 역시 구조 분해 할당 형식으로 적용해 보겠습니다. 

 

var array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

console.log(node);
console.log(obj);
console.log(bool);

/* 출력
nodejs
{}
true
*/

 

눈치가 빠른 분들이라면 눈치 채셨을 것입니다. array의 원소 배열 순서대로 변수 명을 기입하여 자동으로 대입시키는 방식으로 동작하였습니다. 우리는 위 예제에서 array[2] 원소는 대입시키지 않았었습니다. 이는 [, ,] 공백을 둠으로써 적용한 것을 알 수 있습니다.