자바스크립트에서 객체를 생성하기 위해 주로 사용되는 방법 중 하나는 객체 리터럴을 사용하는 것입니다. 객체 리터럴은 중괄호({}) 안에 속성과 값을 정의하는 방식으로 객체를 생성합니다. 하지만 ES6에서는 객체 리터럴을 더욱 편리하게 사용할 수 있는 확장된 문법을 도입했습니다.

프로퍼티 축약 표현

ES6 이전에는 객체의 프로퍼티를 정의하기 위해서는 프로퍼티 이름과 값을 일일히 작성해야 했습니다. 하지만 ES6에서는 프로퍼티 축약 표현을 제공하여, 프로퍼티 이름과 값을 한 번에 작성할 수 있습니다.

// ES6 이전
var name = "John";
var age = 30;
var person = {
  name: name,
  age: age
};

// ES6 확장된 객체 리터럴
var name = "John";
var age = 30;
var person = {
  name,
  age
};

프로퍼티 축약 표현을 사용하면, 변수 이름과 동일한 이름의 프로퍼티를 자동으로 생성할 수 있습니다.

계산된 프로퍼티 이름

ES6에서는 객체의 프로퍼티 이름을 동적으로 계산하여 정의할 수 있는 기능을 제공합니다. 이를 계산된 프로퍼티 이름이라고 합니다. 계산된 프로퍼티 이름은 대괄호([]) 안에 식을 작성하여 프로퍼티 이름을 동적으로 결정할 수 있습니다.

function getPropertyName() {
  return "name";
}

var person = {
  [getPropertyName()]: "John"
};

위의 예제에서는 getPropertyName 함수가 반환하는 값을 프로퍼티 이름으로 사용하여 person 객체를 생성합니다. 이를 통해 동적으로 프로퍼티 이름을 결정할 수 있습니다.

프로퍼티 축약 표현과 계산된 프로퍼티 이름의 결합

프로퍼티 축약 표현과 계산된 프로퍼티 이름을 결합하여 더욱 강력한 객체 리터럴을 구성할 수 있습니다.

var prefix = "app";
var sequence = 1;

var obj = {
  [`${prefix}-item-${sequence}`]: "Value"
};

위의 예제에서는 prefix, sequence 변수를 사용하여 계산된 프로퍼티 이름을 생성하고, 그 값을 "Value"로 설정하여 obj 객체를 생성합니다. 이를 통해 동적인 프로퍼티 이름과 값을 가진 객체를 손쉽게 만들 수 있습니다.

마무리

ES6에서 도입된 자바스크립트 확장된 객체 리터럴 문법을 사용하면, 더욱 간결하고 강력한 객체를 생성할 수 있습니다. 프로퍼티 축약 표현과 계산된 프로퍼티 이름을 적절히 활용하여 자바스크립트 코드를 더 효율적으로 작성해 보세요.