javascript] property shorthand란?

ES6에서 property shorthand, 단축 속성명이라는게 있다.

즉, key와 value의 값이 같으면 각각 표기하지않고 한번만 표기하는 것을 말한다.

 

아래는 vuex에서 사용되는 코드이나 기반은 javascript라서 예제로 사용해본다.

commit('ADD_TOAST') 라는 함수 아래 message와 type 속성들이 있다.

이 부분은 key, value값이 동일하기때문에 생략이 가능하다.

  actions: {
    triggerToast({ commit }, message, type = 'success') {
      // commit('UPDATE_TOAST_MESSAGE', message);
      // commit('UPDATE_TOAST_ALERT_TYPE', type);
      // commit('UPDATE_TOAST_STATUS', true);
      commit('ADD_TOAST', {
        message: message,
        type: type
      });
      
      //아래와 같이 생략이 가능하다.
      commit('ADD_TOAST', {
        message,
        type
      });

      setTimeout(() => {
        commit('UPDATE_TOAST_MESSAGE', '');
        commit('UPDATE_TOAST_ALERT_TYPE', '');
        commit('UPDATE_TOAST_STATUS', false);
      }, 10000);
    },
  },

 

ES6를 깊게 사용하지 않아서 그런지 몰라도 개인적으로 이 부분은 좀 별로인 것 같다.

명시적으로 표기가 되지 않으면 개발자 입장에서 알아먹을 수 있을까? 라는 생각이 된달까...?

이 부분은 조금 더 지나면 익숙해질 것 같다.

 

 

 

 

참고자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자 - JavaScript | MDN