[Javascript] ES6 Enhanced Object Literals(강화된 객체 리터럴 표현 객체 함수 축약, 속성 축약)

안녕하세요. 오늘은 자바스크립트에서 객체를 표현하는 방법중 ES6에서 추가된 내용을 포스팅해보려고 합니다.

 

먼저 객체를 선언할 때, 변수와 함수를 다음과 같이 프로퍼티로 표현할 수 있었습니다.

 

var obj = {
	property1 : 100,
    function1 : function() {
    	console.log('call function1');
    }
};
obj.property1; //100
obj.function1(); //call function1

흔하디 흔한 객체 선언입니다.

프로퍼티명 : 값, 프로퍼티명 : 함수

 

그런데 이부분을 ES6에서는 다음과 같이 표현할 수 있게 되었습니다.

 

먼저, 함수부분입니다.

var obj = {
    function1() {
    	console.log('call function1');
    }
};
obj.function1(); //call function1

기존에는 아래와 같았다면

프로퍼티 : 익명함수명() { 함수바디 }

[ES6]에서 업데이트된 객체 함수 표현식은

프로퍼티명() { 함수바디 }

이렇게 표현할 수 있게 되었습니다.

 

 

다음은 변수부분입니다.

var property1 = 100;
var obj = {
	property1 : property1,
};
property1; 		//100
obj.property1; 	//100

property1이라는 변수명을 가진 100이라는 값이 obj 객체의 property1이라는 속성명의 값으로 할당되었습니다.

이때, 속성명과 변수명이 일치한다면 다음과 같은 문법이 적용될 수 있습니다.

 

[ES6]

var property1 = 100;
var obj = {
	property1
};
property1; 		//100
obj.property1; 	//100

어차피 속성명도 property1이고 할당하는 변수명이 property1이고 둘의 명명을 같이 해주어야 할때는 유용한 표현법인 것 같습니다.