9 ES6 for Vue.js - Enhanced Object Literals

source: categories/study/vue-beginner-lv2/vue-beginner-lv2_9-00.md

9.1 속성 메서드의 축약 특징 설명

Enhanced Object Literals - 향상된 객체 리터럴

객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능

var dictionary = {
    words: 100,
    // ES5
    lookup: function () {
        console.log('find words');
    },
    // ES6
    lookup() {
        console.log('find words');
    }
}
  

// ES6
var dictionary = {
    lookup() {
        console.log('found sth');
    }
}
  

// babel -> ES5
'use strict';

var dictionary = {
    // function이 익명함수로되도 상관이 없는데, 바벨 컨벤션이라 이렇게 이름이 붙어나온다. 있거나 없거나 상관없다.
    lookup: function lookup () {
        console.log('found sth');
    }
}
  

9.2 [리팩토링] 속성 메서드의 축약 특징 리팩토링

Enhanced Object Literals 사용하여 메소드 축약형으로 수정하자!

9.3 속성명의 축약 특징 설명

객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능

var figures = 10;
var dictionary = {
    // figures: figures,
    figures,
}
  

9.4 [리팩토링] 속성명의 축약 특징 리팩토링

위에처럼 속성명과 값명이 일치하는 것들은 모두 축약하자!