[JavaScript] Property Accessor

자바스크립트 객체의 property name은 string이거나 Symbol이다.

그러므로 string이나 Symbol이 아닌 다른 value로 객체의 property에 접근한다면 string으로 강제형변환된다.

let object = {};
object['1'] = 'value';
console.log(object[1]); // 'value'

위에서 bracket notation으로 object[1]로 접근할 때, 1은 number 타입이므로 string으로 강제형변환된다. 즉 object['1'] 을 호출한 것과 동일하게 되어 'value' 를 출력한다.

(참고) bracket notation이 아닌 dot notation으로 접근할 때는 syntax error가 발생한다. (e.g. object.1) dot notation으로 접근하려면 이 property는 유효한 javascript identifier 여야 한다. 그러므로 숫자로 시작하는 식별자는 유효하지 않으므로 dot notation으로 사용할 수 없다.

약간 혼란스러운 건 아래와 같은 예제다.

let foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'value'
console.log(object[bar]); // 'value'
console.log(object[bar] === object[foo]) // true

위에서 foo는 객체이므로, bracket notation으로 객체에 접근하려고 할 때 toString 메서드를 호출하여 문자열로 강제형변환한다.

객체에서 toString 메서드를 호출하면 객체의 클래스 정보가 담긴 문자열을 리턴하는데, 이 경우는 "[object Object]" 라는 문자열을 리턴한다. 그러므로 foo든, bar이든, 타입 검사 결과가 object인 어떤 객체를 넣어도 이는 string으로 형변환되어 object["[object Object]"] 를 호출하는 것과 마찬가지고, "value"를 리턴할 것이다.

Ref

MDN - Property accessors

MDN - Object.prototype.toString()

자바스크립트에서 [object Object] 가 대체 뭘까?