[ 모던 자바스크립트 Deep Dive ] 프로퍼티와 식별자 네이밍 규칙

 

 

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됩니다

let person = {
    name: 'Lee',
    age: 20
}

일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 좋다고 합니다.
여기서 name, age는 프로퍼티 키로, 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 합니다.

식별자 네이밍 규칙은 뭘까요?

 

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)을 포함할 수 있습니다.
• 식별자의 첫 문자는 숫자가 될 수 없습니다
• 예약어는 식별자로 사용될 수 없습니다. ( class, this while ... )

만약에 식별자 네이밍 규칙을 따르지 않으면 어떻게 될까요?
""따옴표를 사용하면 됩니다. 간단하죠?

const person = {
    firstName: '임'
    'last-name': '주현' // 식별자 네이밍 규칙을 준수하지 않았기 때문에 따옴표를 사용했습니다.
}

 

사실, '식별자 네이밍 규칙을 따르지 않은 식별자'를 따옴표로 감싸야 하는 것이 아니라,
'식별자 네이밍 규칙을 따른 식별자'의 따옴표를 생략해도 되는 것입니다.

 

그러면, 접근은 어떻게 할까요?

person.last-name // 1
preson.'last-name' // 2
person['last-name'] // 3
person[last-name] // 4

식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키는, 대괄호 표기법을 사용해야 합니다.
대괄호 내에 들어가는 프로퍼티 키는 따옴표로 감싼 문자열이기 때문에 3번 방법으로 접근할 수 있겠죠?

 

프로퍼티 키 동적 생성하기

문자열 또는 문자열로 평가할 수 있는 표현식을 사용해서 프로퍼티 키를 동적으로 생성할 수도 있습니다. 이 경우에는 프로퍼티 키로 사용한 표현식을 대괄호로 묶어야 합니다
[]

const obj = {}
const key = 'hello'

obj[key] = 'world' // ES6 : const obj = {[key]: 'world'}

console.log(obj) // {hello: 'world'}

 

계산된 프로퍼티 키 동적 생성하기

문자열 또는 문자열로 타입 변환할 수 있는 표현식을 이용해 프로퍼티 키를 동적 생성할 수 있습니다.
단, 표현식을 대괄호로 묶어야 합니다
이를 계산된 프로퍼티 이름이라고 합니다.

const prefix = 'prop'
let i = 0;

const obj = {
    [`${prefix}-${++i}`] : i,
    [`${prefix}-${++i}`] : i,
    [`${prefix}-${++i}`] : i
}
// {prop-1: 1, prop2: 2. prop3: 3}