[javascript] 객체 리터럴에서 프로퍼티의 숨은 함정

15 Dec 2023

자바스크립트의 객체 리터럴은 간단하고 유연한 방식으로 객체를 생성할 수 있게 해줍니다. 그러나 때로는 객체를 생성할 때 발생할 수 있는 숨은 함정에 주의해야 합니다.

문제

객체 리터럴을 사용하여 객체를 생성할 때, 프로퍼티 이름에는 특수 문자나 예약어를 사용할 수 있습니다. 그러나 이러한 경우에는 주의가 필요합니다.

const myObj = {
  default: 'Value 1',
  123: 'Value 2',
  'special-key': 'Value 3',
};

위의 예시에서 default와 123은 유효한 프로퍼티 이름으로 인식되지만, special-key는 유효하지 않은 식별자이기 때문에 따옴표로 감싸줘야 합니다.

프로퍼티 이름이 유효한지 확인하려면 일반적으로 . 표기법을 사용하여 프로퍼티에 액세스하는 것이 좋습니다. 다음과 같이 접근할 수 있습니다.

console.log(myObj.default);    // 'Value 1'
console.log(myObj['123']);     // 'Value 2'
console.log(myObj['special-key']);  // 'Value 3'

객체 생성 시 특수 문자나 예약어를 사용할 때는 프로퍼티 이름을 올바르게 사용하기 위해 주의하는 것이 중요합니다.

이러한 함정을 피하고 코드를 더 명확하게 만들기 위해 항상 프로퍼티에 대한 접근 방법을 신중하게 고려해야 합니다.