ES6 lessons 5. 향상된 객체 리터럴

2023.03.26

자바스크립트 스터디 10회차

공부 사이트: https://poiemaweb.com/

 

5. 향상된 객체 리터럴

ES6에서는 객체 리터럴 프로퍼티 기능을 확장하여 간편하고 동적인 객체 생성 기능을 제공한다.

 

1) 프로퍼티 축약 표현

ES5 : 객체 리터럴의 프로퍼티는 "프로퍼티 명 + 프로퍼티 값" 으로 구성

ES6 : 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 명을 생략할 수 있다. (프로퍼티 명은 변수명으로 자동 생성됨)

let x = 1, y = 2;
const obj = {x,y};

console.log(obj);
// { x : 1, y : 2 }

 

 

2) 프로퍼티 키 동적 생성

ES5 : 프로퍼티 키를 동적으로 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용해주어야 함.

ES6 : 객체 리터럴 내부에서도 프로퍼티 키를 동적으로 생성 가능

const prefix = 'test';
let i = 0;

const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj);

 

 

3) 메소드 축약 표현

ES5 : 메소드 선언 시 프로퍼티 값으로 함수 선언식을 할당 (sayHi : function() ....)

ES6 : function 키워드를 생략한 축약 표현을 사용할 수 있음

const obj = {
	name : "홍길동",
	sayHi() {
		console.log('Hello ' + this.name);
	}
};

 

 

4) __proto__ 프로퍼티에 의한 상속

ES5 : 객체 리터럴 상속 위해서는 Object.create() 사용. (프로토타입 패턴 상속)

ES6 : 객체 리터럴 내부에서 __proto__ 프로퍼티를 직접 설정 가능 (해당 프로퍼티에 다른 객체를 직접 바인딩)

const parent = {
	name : 'parent',
	sayHi(){
		console.log('Hi ' + this.name);
	}
};

const child = {
	__proto__ : parent,
	name : 'child'
};

parent.sayHi();
child.sayHi();