[Javascript] 객체 확장 표현식

Bam·2022년 2월 28일
0

Javascript

목록 보기
73/106
post-thumbnail

객체 확장 표현식

ES6에서 객체 확장 표현식을 지원하면서, 객체를 작성하는데 있어 편의성이 많이 올라갔습니다.

기존에는 키 이름과 키 값이 동일할지라도, 키 이름과 키 값을 무조건 명시해주어야했습니다.

let a = 1;
let b = 1;
let obj = { a: a, b: b };

객체 확장 표현식에서는 키 값을 생략하면, 키의 이름을 통해서 키 값을 지정할 수 있게 되었습니다.

let a = 1;
let b = 1;
let obj = { a, b };

위 코드에서 ab가 키의 이름이자 값의 역할을 합니다.


또 다른 용법으로는 계산된 키를 넣는 방법이 있습니다.

기존 방식에서 계산된 키를 넣기 위해서는 계산된 키와 키 값을 지정해주는 코드를 다음과 같이 따로 작성했어야했습니다.

let str = 'ar';
let obj = {};

obj['c' + str] = 'truck';

객체 확장 표현식에서는 코드를 따로 지정할 필요없이, 객체 리터럴 내부에 바로 계산된 키를 넣을 수 있게 되었습니다.

let str = 'ar';
let obj = {
	['c' + str]: 'SUV',
};



마지막 용법은 객체 내에서 함수 선언입니다.

기존에는 객체 내부에 함수를 정의하기 위해서는 다음과 같이, 키에 function 명령 함수 리터럴을 통해 정의했습니다.

let obj = {
	funcInObject: function() {
    	return console.log('개구리');
    }
};

객체 확장 표현식에서는 바로 함수명을 적고 정의할 수 있게 되었습니다. function 명령도 생략이 가능해졌고, 다른 언어의 메소드처럼 즉시 정의할 수 있게 된 것 입니다.

let obj = {
	funcInObject() {
    	console.log('두꺼비');
    }
};

0개의 댓글