es6 객체 리터럴 문법 및 표현

객체 리터럴이란? 

객체를 정의하는 방법이 2가지가 있습니다.

 

1. new 키워드로 생성자 함수로 객체 생성.

2. 객체 리터럴로 직접 객체의 속성과 값을 문자로 적는 것.

 

여기서 객체 리터럴이란?

// 객체리터럴 
const obj = {
	prop1 : "첫번째 속성값",
    prop2 : "두번째 속성값",
    prop3 : "세번째 속성값",
}

위와 같이 객체를 정의할 때 직접 속성명과 속성값을 하나하나 문자로 적어서 객체를 정의하는 것이 객체 리터럴 방식입니다. 

 

ES6에서는 이 객체 리터럴이 좀 더 편한게 향상된 것이 있다고 해서 "향상된 객체리터럴"으로 자주 설명되곤 합니다. 

지금 부터 그 향상된 객체리터럴 표기법을 알아봅시다.

 

크게 3가지 정도가 있습니다.

1. 속성명과 속성값의 변수명이 같다면, 하나만 기입가능.

2. 메서드 속성을 정의할 때 function() 키워드 생략가능.

3. 동적 속성명을 바로 정의가능.

 

그냥 이렇게만 본다면 모르시겠죠. 하나씩 코드를 보면서 설명해보겠습니다.

1. 속성명과 속성값의 변수명이 같다면, 하나만 기입가능.

// ES5에서는 이렇게 써야합니다.
var myName = 'cucuhama';
var obj = {
	myOld : '23',
    myLocation : 'GangNam',
    myName : myName  		// 여기서 myName이라는 속성명(key값)의 값(value값)으로 변수 myName을 지정했습니다.   
}

 

위와 같이 myName : myName 처럼 myName이 두 번 중복되고 있죠. 이런 현상을 없애기 위해서 ES6 부터는 만약 저렇게 속성명과 그 값의 변수명이 서로같다면, myName 한번만 적어도 됩니다. 

const myName = 'cucuhama';
const obj = {
	myName,				// 이렇게 한번만 적어도 myName : myName 처럼 동작합니다.
    myOld : '23',
}

 

 

 

2. 메서드 속성을 정의할 때 function() 키워드 생략가능.

// ES5 기존 문법
var obj = {
	prop1 : "something",
    prop1 : "anything",
    method1 : function(){					// 반드시 메서드일 경우 function() 키워드 필요
    	console.log("이것은 메소드입니다");
    },
};

 

더 이상 function 키워드를 쓰지 않아도 됩니다. 이렇게 말이죠.

const obj = {
	porp1 : "somethind",
    prop2 : "else",
    method1() {								// 바로 함수명을 적으면 됩니다.
    	console.log("이것은 메서드입니다.");
    }
 };
 

 

 

 

 

3. 동적 속성명을 바로 정의가능.

동적 속성명이란, 속성명으로 변수를 사용해서 동적으로 속성명을 정의할 수 있도록 하는 것 입니다. 

// ES5 에서 동적 속성명 하기

// 우선 먼저 객체를 정의하고
var obj = {
	prop1 : "lulu",
    prop2 : "lala",
    method1 : function(){
    	console.log("룰루 랄라");
    },
};
 
// 객체를 먼저 생성하고 그 다음에 동적 속성명을 정의한다.
var value = "prop3";
obj[value] = '동적이군';   // obj에 prop3이란 속성이 생기고 값으로 "동적이군"이 들어간다.
 
 
 

하지만 ES6 부터는 위와는 다르게 객체를 정의할 때 같이 동적속성명을 정의할 수 있습니다.

let value = "prop3";			// 동적으로 정의할 속성명을 변수 "value"에다가 저장합니다. 
const obj = {
	prop1 : "룰루",
    prop2 : "랄라",
    hoho() {
    	console.log("호호 함수");
    },
    [value] : '동적이군',		// 이렇게 바로 객체리터럴에서 동적으로 정의할 수 있습니다.
};