자바스크립트에서 객체를 생성할 때, 객체 리터럴을 사용하는 것이 일반적입니다. 객체 리터럴은 중괄호 {}로 표현되며, 속성과 값을 콜론 :으로 연결하여 정의합니다. 이때, 객체의 속성을 간편하게 작성하기 위해 자바스크립트에서는 객체 리터럴 단축 문법을 지원합니다.

단축 문법의 기본 구조

객체 리터럴 단축 문법을 사용하여 객체를 생성하면, 속성 이름과 속성 값이 같을 때 속성 이름만 작성할 수 있습니다. 예를 들어, 다음과 같이 객체를 생성할 수 있습니다.

const name = "John";
const age = 30;

const person = {
  name, // 단축 문법으로 속성 이름만 작성
  age, // 단축 문법으로 속성 이름만 작성
  greet() { // 함수도 단축 문법으로 작성 가능
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};

console.log(person.name); // 출력: John
console.log(person.age); // 출력: 30
person.greet(); // 출력: 안녕하세요, 저는 John입니다.

계산된 속성 이름

객체 리터럴 단축 문법을 사용할 때, 속성 이름을 동적으로 계산하여 작성할 수도 있습니다. 이를 계산된 속성 이름(computed property name)이라고 합니다. 계산된 속성 이름은 속성 이름을 대괄호 []로 감싸고, 그 안에 표현식을 작성하여 사용합니다.

const prefix = "fruit";
const number = 1;

const obj = {
  [prefix + number]: "banana" // 계산된 속성 이름
};

console.log(obj.fruit1); // 출력: banana

이처럼 계산된 속성 이름을 사용하면, 동적인 속성 이름을 가진 객체를 간편하게 생성할 수 있습니다.

메서드 단축 문법

객체에 메서드를 추가할 때도, 메서드 단축 문법을 사용할 수 있습니다. 메서드 단축 문법은 이름과 함수 정의 사이에 콜론 :을 추가하여 작성합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

const calculator = {
  add(a, b) { // 메서드 단축 문법으로 메서드 추가
    return a + b;
  },
  subtract(a, b) { // 메서드 단축 문법으로 메서드 추가
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // 출력: 8
console.log(calculator.subtract(5, 3)); // 출력: 2

정리

자바스크립트 객체 리터럴 단축 문법을 사용하면, 객체 생성과 속성 추가를 간결하게 할 수 있습니다. 속성 이름과 값이 같을 때는 속성 이름을 생략하고, 메서드를 추가할 때도 간단한 문법으로 작성할 수 있습니다. 계산된 속성 이름을 사용하여 동적인 객체도 손쉽게 생성할 수 있습니다. 이러한 단축 문법을 활용하면 더 가독성이 좋고 간결한 코드를 작성할 수 있습니다.