[JS] 객체 프로퍼티 접근법과 식별자 네이밍 규칙

[JS] 객체 프로퍼티 접근법과 식별자 네이밍 규칙

 

 

객체 프로퍼티 접근법과 식별자 네이밍 규칙에 대해 정리하려고 한다.

객체object는 프로퍼티와 메서드로 구성된 집합체이다.

프로퍼티property란 객체의 상태를 나타내는 값(data)이고,

메서드method는 프로퍼티를 참조 및 조작할 수 있는 동작(behavior)이다.

메서드도 결국 프로퍼티인데, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위하여 메서드라고 일컫는다.

 

객체 프로퍼티에 접근하는 방법은 크게 두 가지가 있다.

1. 마침표 표기법dot notation : 마침표 프로퍼티 접근 연산자(.) 사용

2. 대괄호 표기법bracket notation : 대괄호 프로퍼티 접근 연산자([ ... ]) 사용

 

오늘은 이 중 대괄호 표기법에 대해 자세히 알아볼 것이다.

 

대괄호 표기법에서, 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

따옴표로 감싸지 않은 이름을 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석하기 때문이다.

 

var person = {
  name: 'Lee',
  age: 20
};

console.log(person.name); // 'Lee' (마침표 표기법)
console.log(person.'name'); // Uncaught SyntaxError: Unexpected string
console.log(person[name]); // undefined
console.log(person['name']); // 'Lee' (대괄호 표기법)

let name = 'age';
console.log(person[name]); // 20 (name이 식별자로 인식됨)

console.log(person.age); // 20
console.log(person.'age'); // Uncaught SyntaxError: Unexpected string
console.log(person[age]); // ReferenceError: age is not defined
console.log(person['age']); // 20

 

프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않을 경우, 반드시 대괄호 표기법을 사용해야 한다.

단, 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

const obj1 = {
  a-b-c: true
};
// Uncaught SyntaxError: Unexpected token '-'

const obj2 = {
  12345: false
};
// 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

console.log(obj2.12345); // Uncaught SyntaxError: missing ) after argument list
console.log(obj2.'12345'); // Uncaught SyntaxError: Unexpected string
console.log(obj2[12345]); // false
console.log(obj2['12345']); // false

const obj3 = {
  'a-b-c': true,
  '12345': false
};
// 올바른 프로퍼티 접근법

console.log(obj3['12345']); // false
console.log(obj3[12345]); // false
console.log(obj3['a-b-c']); // true
console.log(obj3[a-b-c]); // ReferenceError: a is not defined

 

대괄호 접근법 내에 식별자를 사용할 수 있다는 점을 이용해 다음과 같은 코드를 작성할 수도 있다.

const obj = {
  hi: 'hello'
};

const a = 'h';
const b = 'i';
console.log(obj[a + b]); // hello

 

물론 이렇게 무식하게 말고 깔끔하게 활용할 수도 있다.

// ES5
let prefix = 'prop';
let i = 0;
const obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

// ES6
let prefix = 'prop';
let i = 0;

const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

그래서 언제 마침표 표기법을, 언제 대괄호 표기법을 사용하면 되는 걸까?

마침표 표기법은 프로퍼티 키가 정적일 때, 즉 정해져 있을 때 사용할 수 있다. 단, 프로퍼티 키가 정적이더라도 식별자 네이밍 규칙을 준수하지 않는다면 대괄호 표기법을 사용해야 한다.

대괄호 표기법은 프로퍼티 키가 동적일 때 사용해야 한다. 예를 들어 서버에서 데이터를 받아온 후 그 데이터에 따라 프로퍼티 키가 정해지는 경우 등이 있을 수 있겠다.

 

 

 

앞서 언급한 식별자 네이밍 규칙이란 무엇일까?

일단 식별자identifier란 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름을 일컫는다.

식별자는 다음과 같은 네이밍 규칙을 준수해야 한다.

1. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
2. 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용되지 않는다.
3. 예약어는 식별자로 사용할 수 없다.

예약어reserved word는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어로,

자바스크립트의 예약어에는 await, break, case, catch, ..., while, with, yield 등이 있다.

이중 일부는 strict mode에서는 식별자로 사용 불가, strict mode가 아니라면 식별자로 가능하다.

전체 예약어는 MDN 문서에서 확인 가능하다.

 

---

References

모던 자바스크립트 Deep Dive (Chapter 10, 4.7)