자바스크립트에서 객체를 생성하고 초기화하는 가장 일반적인 방법은 객체 리터럴을 사용하는 것입니다. 객체 리터럴은 중괄호({})를 사용하여 새로운 객체를 만들고, 속성과 해당 값을 정의하는 방식입니다.

하지만 자바스크립트에서는 객체 리터럴을 더욱 확장하여 보다 간편하고 가독성 좋은 코드를 작성할 수 있습니다. 이 글에서는 자바스크립트 확장된 객체 리터럴에 대해 알아보겠습니다.

기본 객체 리터럴

먼저, 기본적인 객체 리터럴을 살펴보겠습니다. 아래의 예제 코드는 person 객체를 생성하고 초기화하는 기본적인 형태입니다.

const person = {
  name: 'John',
  age: 30,
  gender: 'male',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

위 예제에서 person 객체는 name, age, gender와 같은 속성들을 가지고 있습니다. 또한, sayHello라는 메소드를 정의하여 객체의 동작을 정의하였습니다.

축약된 객체 리터럴

자바스크립트에서는 객체의 속성 이름과 값이 동일한 경우에는 축약하여 작성할 수 있습니다. 아래의 예제 코드는 축약된 객체 리터럴의 사용을 보여줍니다.

const name = 'John';
const age = 30;
const gender = 'male';

const person = { name, age, gender };

위 예제에서는 name, age, gender 변수를 사용하여 객체를 초기화하였습니다. 이 경우, 변수의 이름과 동일한 속성 이름을 가진 객체가 생성되어 속성의 값으로 변수의 값이 할당됩니다.

계산된 속성 이름

확장된 객체 리터럴에서는 속성 이름에 변수나 표현식을 사용할 수도 있습니다. 이를 계산된 속성 이름(computed property name)이라고 합니다. 아래의 예제 코드는 계산된 속성 이름을 사용하는 예제입니다.

function getProperty(property) {
  return `my_${property}`;
}

const key = 'name';
const person = {
  [key]: 'John',
  [getProperty('age')]: 30
};

위 예제에서 key 변수의 값인 name은 객체의 속성 이름으로 사용됩니다. 또한, getProperty 함수의 반환 값인 my_age은 person 객체의 또 다른 속성 이름으로 사용됩니다.

화살표 함수

ES6 이후부터는 객체 리터럴 내에서 화살표 함수를 사용할 수도 있습니다. 이를 활용하면 메소드를 더욱 간결하게 정의할 수 있습니다. 아래의 예제 코드는 화살표 함수를 사용한 객체 리터럴입니다.

const person = {
  name: 'John',
  age: 30,
  sayHello: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

위 예제에서 sayHello 메소드는 화살표 함수로 정의되었습니다. 이렇게 하면 메소드 내에서 this 키워드를 사용하여 객체의 속성값에 접근할 수 있습니다.

마무리

위에서 소개한 확장된 객체 리터럴의 기능들을 활용하면 자바스크립트에서 객체를 더욱 효율적으로 생성하고 초기화할 수 있습니다. 축약된 표현 및 계산된 속성 이름을 사용하여 코드의 가독성과 유지 보수성을 개선할 수 있습니다. 또한, 화살표 함수를 사용하여 메소드를 더욱 간결하게 정의할 수도 있습니다.

이러한 확장된 객체 리터럴을 적절하게 활용하면 더욱 효율적이고 깔끔한 자바스크립트 코드를 작성할 수 있습니다. 이를 응용하여 다양한 프로젝트에서 객체를 생성하고 초기화하는 과정을 보다 효과적으로 수행할 수 있습니다.