30. ES6의 향상된 객체 문법 알아보기

[Irisation23]

ES6의 향상된 객체 문법 알아보기

단축 속성명

ES6에 새로 추가된 JavaScript 기능중 하나인 단축 속성명은 객체의 속성(property)을 좀 더 간단하게 정의 할 수 있도록 했다.

객체 속성을 리터럴로 정의하기 위해서는 키: 값 으로 작성했어야 했다.
단축속성명은 변수가 미리 준비되어 있는 경우 활용 가능하며, 변수명 으로 속성의 키와 값을 한번에 정의할 수 있다.

{ 변수명 }

var address = 'Seoul';
var members = {};
var addFamily = function(age, name, role) {
    this.members[role] = {age, name};
};
var getHeadcount = function() {
    return Object.keys(this.members).length;
};

var family = {address, members, addFamily, getHeadcount};

family.addFamily(30, 'chloe', 'aunt');
family.addFamily(3, 'lyn', 'niece');
family.addFamily(10, 'dangdangi', 'dog');

console.log(family.getHeadcount());

// 결과 값은 3

속성 계산명

속성 계산명(Coumputed Property Name) 속성 이름을 정의하는 다른 방법이다.
대괄호 [] 안에 식을 넣거나 변수를 대입하여 동적으로 객체 속성들을 생성할 수 있다.

var obj = {};
for (var i = 0; i < 4; i++) {
    obj['key' + i] = i;
}

console.log(obj);

var profile = 'chloe:30';

var person = {
    [profile]: true,
    [profile.split(':')[0]]: profile.split(':')[1]
};

console.log(person);

• 결과

{ key0: 0, key1: 1, key2: 2, key3: 3 }
{ 'chloe:30': true, chloe: '30' }