[Javascript] 구조 분해 할당 ( destructuring )

Vuex 를 공부하다가 destructuring에 대한 내용이 나와서 정리해보려고한다.

하나를 공부하는데 필요한 지식이 너무많아서 꼬리에 꼬리를 물고 계속 공부중이다 ! ( 재밌긴 하다 )

 

Destructuring 중 객체 구조 분해 할당

let obj = {
  name : "devlog",
  age : 1
};

let { name, age } = obj; // { "devlog" , 1 }

객체를 구조분해 할 때 주의해야 할 것은 할당 연산자의 왼쪽에 객체리터럴이 와야 하고,할당 연산자의 오른쪽에 오는 값이 null이나 undefined여서는 안된다는 것이다.

 

Vuex - action 예시

// store/index.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

위에서보면 action 핸들러는 context 객체를 받는다. context 객체는 다음과 같은 속성들에 접근할 수 있다.

이때 구조 분해 할당 ( destructuring ) 을 이용해서 context.commit 을 따로 객체화할 수 있다.

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

이렇게 하는 이유는 단순히 commit 을 여러번 호출해야하는 경우 귀찮기 때문이다 ! ( 라고 알고있음 )

 

참고 : hees-dev.tistory.com/36

[Javascript] 구조 분해 할당(destructuring)