Javascript/ECMAScript 2015 (ES6)

객체 리터럴 프로퍼티 기능 확장 - 문법 | Poiemaweb

AGAL 2020. 2. 17. 22:45
반응형

[출처 : https://poiemaweb.com]

1. 프로퍼티 축약 표현

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 프로퍼티 이름을 생략(Property shorthand)할 수 있다.

이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다.

var x = 1, y = 2;

// ES5 :  객체 리터럴의 프로퍼티는 이름과 값으로 구성된다. 프로퍼티의 값은 변수에 할당된 값일 수도 있다.
var Object = {
  x: x,
  y: y
}

// ES6 : 프로퍼티의 값으로 변수를 사용할 경우, 이름은 생략 가능. *프로퍼티 이름 = 변수의 이름
const Object = { x, y };

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

2. 프로퍼티 키 동적 생성

문자열 또는 문자열로 변환 가능한 값을 반환하는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다.

단, 프로퍼티 키로 사용할 표현식을 대괄호([…])로 묶어야 한다. 이를 계산된 프로퍼티 이름(Computed property name)이라 한다.

var prefix = "prop";
var i = 0;

// ES5 : 프로퍼티 키를 동적으로 생성하려면 객체 리터럴 외부에서 대괄호([…]) 표기법을 사용
var Object = {};
object[prefix + "-" + ++i] = i;
object[prefix + "-" + ++i] = i;

// ES6 : 객체 리터럴 내부에서도 프로퍼티 키를 동적으로 생성
const Object = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
}

console.log(Object);    // {prop-1: 1, prop-2: 2}

3. 메소드 축약 표현

var Object = {
  name: "AGAL",
  // ES5 : 메소드를 선언하려면 프로퍼티 값으로 함수 선언식을 할당한다.
  say: function(){
    console.log("Hi " + this.name);
  }
  
  // ES6 : 메소드를 선언할 때, function 키워드를 생략한 축약 표현을 사용 가능.
  say() {
    console.log("Hi " + this.name);
  }
}
Object.say();    // Hi AGAL

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

ES6에서는 객체 리터럴 내부에서 __proto__ 프로퍼티를 직접 설정할 수 있다.

이것은 객체 리터럴에 의해 생성된 객체의 __proto__ 프로퍼티에 다른 객체를 직접 바인딩하여 상속을 표현할 수 있음을 의미한다.

var parent = {
  name: "parent",
  say : function(){
    console.log("Hi " + this.name);
  }
}

// ES5 : 객체 리터럴을 상속하기 위해서는 Object.create() 함수를 사용 *프로토타입 패턴 상속
var child = Object.create(parent);
child.name = "child";

// ES6 : child 객체의 프로토타입 객체에 parent 객체를 바인딩하여 상속을 구현한다.
const child = {
  __proto__: parent,
  name: "child"
}

parent.say();    // Hi parent
child.say();    // Hi Child

Reference

반응형