[ES6 JavaScript] 객체 리터럴(Object Literals)

 객체 리터럴이란 중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트라고 말할 수 있습니다. 일반적으로 객체를 생성하는 방법을 생각하시면 됩니다. 오늘은 객체 리터럴에 대해 알아보도록 하겠습니다. 먼저 확인할 부분은 ES6이전에도 사용가능했던 부분입니다. 이 부분을 먼저 공부해보겠습니다.

 

Pixabay 로부터 입수된  Pexels 님의 이미지 입니다.

객체 리터럴

var sales = 'Toyota';

function carTypes(name) {
  if (name === 'Honda') {
    return name;
  } else {
    return "Sorry, we don't sell " + name + ".";
  }
}

var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };

console.log(car.myCar);   // Saturn
console.log(car.getCar);  // Honda
console.log(car.special); // Toyota 

 위 코드는 다양한 객체 리터럴의 예입니다. 객체 리터럴의 첫번째 요소는 myCar라는 이름을 가졌고 값으로는 문자열 'Saturn'을 가졌습니다. 두번째 요소는 getCar라는 이름을 가지고 있고 값으로는 carType('Honda')라는 함수의 결과 값을 값으로 가지고 있습니다. 그리고 마지막 요소는 special이라는 이름을 갖고 sales이라는 변수의 값을 값으로 가지고 있습니다. 이렇게 객체 리터럴은 다양한 형태의 값을 가질 수 있습니다.

 

var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };

console.log(car.manyCars.b); 	// Jeep
console.log(car[7]); 		// Mazda

 

 위와 같이 숫자나 문자열을 속성의 이름으로 사용할 수 있고, 다른 객체를 값으로 사용할 수도 있습니다.

 

var unusualPropertyNames = {
  '': 'An empty string',
  '!': 'Bang!'
}
console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
console.log(unusualPropertyNames['']);  // An empty string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
console.log(unusualPropertyNames['!']); // Bang!

 빈 문자열이나 특수문자도 속성의 이름으로 사용 가능합니다. 단, 이러한 경우, .(dot)를 이용한 참조는 불가능합니다. 대괄호([])를 이용하여 참조해주세요.

 

향상된 객체 리터럴(ES6)

 ES6에서는 향상된 객체 리터럴을 제공합니다. 

var obj = {
    // 선언문에서 프로토타입 설정 가능
    __proto__: theProtoObj,
    // name, value 문자열이 같은 경우 단축 표기법 지원
    handler,
    // Methods
    toString() {
     // Super calls
     return 'd ' + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

• 선언문에서 프로토타입 설정 가능
  • 이제 선언과 동시에 프로토타입 설정이 가능합니다. 
• name, value 문자열이 같은 경우 단축 표기법 지원
  • name과 value의 문자열이 같은 경우 단축 표기가 가능합니다. 예를들어 위에서 handle의 경우, 기존대로라면 handler: handler로 표기했어야했는데, 단축해서 표현했습니다.
• 메소드 정의 지원
  • 메소드 정의가 지원됩니다. 위 toString 함수와 같이 객체의 메소드를 정의할 수 있습니다.
• super 클래스 메서드 호출 지원
  • 상속 관계에서 부모 클래스가 있다면 부모 클래스의 메서드를 호출할 수 있습니다.
• 계산된 속성 이름 지원
  • 정적인 속성 이름밖에 지원되지 않았던 기존과는 달리 계산된 결과를 속성 이름으로 사용가능합니다. 

 

 

참고:

developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

Grammar and types