본문 바로가기
개발자의 공부방/Frontend

javascript] property shorthand란?

by 쥬니준 2021. 12. 6.
728x90
반응형

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

객체는 new Object(), Object.create() 또는 literal 표기법(initializer 표기법)을 사용해 초기화될 수 있습니다. 객체 초기자는 중괄호({})로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구

developer.mozilla.org

 

반응형

'개발자의 공부방 > Frontend' 카테고리의 다른 글

javascript] 단축평가 논리계산법.  (0) 2021.12.15
javascript] Truthy와 Falsy  (0) 2021.12.15
javascript] property shorthand란?  (0) 2021.12.06
vue] vue.js 경로 '@' 의미  (0) 2021.11.29
Vue] vue JS 시작.  (0) 2021.11.26
날짜 계산  (0) 2021.04.27

댓글0