특정 프로퍼티에 괄호 표기법으로 접근하기

자바스크립트에서 객체의 프로퍼티(속성)에 접근하는 방법에는 두 가지(점 표기법, 괄호 표기법)가 있다. 그 중 괄호 표기법이 헷갈려서 남기는 페이지.

 

1. 객체와 프로퍼티

자바스크립트에서 객체는 여러 개의 값을 저장할 수 있는 데이터 구조이다.

let person = {
  name: "John",
  age: 30,
  hobby: "reading"
};

 

이 객체는 `name`, `age`, `hobby` 라는 프로퍼티를 가지고 있다.

 

 

2. 점 표기법 vs 괄호 표기법

• 점 표기법: `person.name` 이렇게 사용해서 `name` 프로퍼티에 접근할 수 있다.
• 괄호 표기법: `person["name"]` 이렇게 사용해도 `name` 프로퍼티에 접근할 수 있다.

괄호 표기법은 변수나 문자열로 프로퍼티 이름을 동적으로 설정할 수 있어서 더 유용할 때가 있다고 한다.

 

 

3. 예시

만약 프로퍼티 이름이 변수에 저장되어 있다면, 점 표기법으로는 접근할 수 없다. 이럴 때 괄호 표기법을 사용하면 유용하다.

 

3-1. 왜 점 표기법으로 접근할 수 없는가?

점 표기법은 프로퍼티 이름이 코드에 명시적으로 하드코딩되어 있어야 한다. 즉, 프로퍼티 이름이 문자열로 직접 제공되는 경우에만 사용할 수 있다.

let person = {
  name: "John",
  age: 30
};

console.log(person.name);  // "John"

 

이 경우 `person.name`은 `person` 객체의 `name` 프로퍼티에 직접 접근하는 것이다. 프로퍼티 이름이 하드코딩되어 있으므로 문제가 없다.

 

하지만 프로퍼티 이름이 변수에 저장되어 있는 경우에는 점 표기법을 사용할 수 없다.

let propertyName = "age";
console.log(person.propertyName);  // undefined

 

위 코드에서 `propertyName` 은 변수로, 점 표기법을 사용할 때 `person.propertyName` 은 `person` 객체의 `propertyName` 이라는 프로퍼티를 찾으려 한다. 하지만 실제로는 `propertyName` 이라는 이름의 프로퍼티가 `person` 객체에 존재하지 않는다.

 

3-2. 괄호 표기법 사용

따라서, 프로퍼티 이름이 변수로 저장되어 있는 경우에는 괄호 표기법을 사용하여 변수에 저장된 프로퍼티 이름으로 접근해야 한다.

console.log(person[propertyName]);  // 30

 

이렇게 괄호 표기법을 사용하면 변수의 값이 프로퍼티 이름으로 사용될 수 있어서 유언성을 제공한다.