객체 동적으로 접근하기 [2/27]

아래와 같은 객체가 있다. 이 객체에 접근하기 위해 점 표기법(dot notation)과 대괄호 표기법을 사용할 수 있다.

const obj = {
  name: '완벽한 결말',
  artist: 'someone',
  length: 120
}

1. 점 표기법
   코딩하는 시점에 key가 'name'인 값에 접근한다.

obj.name;

2. 대괄호 표기법

function getValue (key) {
  return obj[key];
}

obj[key];

동적으로 속성에 접근한다.
그냥 obj.key를 하면 키가 'key'인 값에 접근할 뿐이지만 대괄호 표기법을 사용하면 인자로 들어오는 다양한 값을 받아 처리할 수 있다.

MDN 객체로 작업하기를 보다가 아래와 같은 표현을 발견했다.

모든 대괄호 표기법 안의 키는 심볼이 아닌 경우 문자열로 변환되는 점을 기억하세요. JavaScript 객체의 속성 이름(키)은 문자열이나 심볼 뿐이기 때문입니다.

직접 실험해 보았다.

const myObj = new Object();

// 입력
myObj.anything = 100;
myObj.123 = 'num'; // Error (Unexpected number)
myObj[123] = 'test';

// 출력
myObj[123]; // 'num'
myObj['123'] // 'num'

출력부를 보면 알 수 있듯이 대괄호 표기법 안에 숫자를 넣어 키로 만들면 JavaScript는 obj.toString() 메서드를 호출하여 문자열을 키로 사용한다.