ES6의 향상된 객체 문법 - 단축 속성명

ES6에 새로 추가된 자바스크립트 기능인 단축 속성명을 활용하여, 객체의 속성을 좀 더 간단하게 정의할 수 있다.

기존에는 객체 속성을 리터럴로 정의하기 위해서는 {키 : 값}으로 작성해야 했지만 단축 속성명은 변수가 미리 준비되어 있는 경우 활용 가능하며, 변수명으로 속성의 키와 값을 한번에 정의할 수 있다, 이는 객체 리터럴 선언 시 코드를 더 짧고 가독성 있게 만들어 준다.

 

{변수명}

 

예제⬇️

let address = 'Seoul';
let members = {};
let addFamily = function(age, name, role){
    this.members[role] = {age, name};
};
let getHeadcount = function(){
    return Object.keys(this.members).length;
}
// 기존 family 객체의 속성을 변수로 작성한다. 
// 각 속성의 키 이름을 변수명으로 정의하고, 값을 해당 변수에 할당한다. 
// 따라서 변수 address, members, addFamily, hetHeadcount에 해당하는 속성값이 할당된다.

let family = {address, members, addFamily, getHeadcount};
// family 객체 리터럴을 선언한다. 
// 1~8 라인에서 정의한 변수들을 중괄호 {}안에 넣는다. 
// 이때 {변수명}으로 정의한 객체는 {변수명 : 변수값}으로 정의된 것과 동일하다
// 단축 속성명은 문자열, 객체, 함수 등 자료형에 상관없이 적용이 가능하다


family.addFamily(30, 'chloe', 'aunt');
family.addFamily(3, 'lyn', 'niece');
family.addFamily(10, 'dangdangi', 'dog');
// family 객체의 속성 addFamily 함수를 호출하여 member를 추가한다.

console.log(family.getHeadcount());
// family 객체의 속성 getGeadcount 함수를 호출하여 member에 추가된 개수(인원수)를 출력한다.

 

결과⬇️

3

 

✅ 정리

• 단축속성명은 변수명으로 속성의 키(Key)와 값(Value)을 한 번에 정의할 수 있다.
• 변수명은 키값이고 변수안에 할당되는 값이 속성 값(Key와 Value)이다.