개발자의 공부방/Frontend

javascript] property shorthand란?

  • -
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
vue] vue.js 경로 '@' 의미  (0) 2021.11.29
Vue] vue JS 시작.  (0) 2021.11.26
날짜 계산  (0) 2021.04.27
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.