프로퍼티 접근자

프로퍼티 접근자(property accessor)는 점 또는 괄호 표기법으로 객체 프로퍼티에 접근할 수 있도록 해줍니다.

구문

object.property
object["property"]

설명

객체를 연관 배열(associative array.  map, dictionary, hash, lookup table 등이 이에 속함)로 생각할 수 있습니다. 이때, 배열의 키는 객체 프로퍼티의 이름입니다. 보통, 프로퍼티와 메서드를 구별할 때 객체의 프로퍼티에 대해 언급합니다. 그러나 프로퍼티와 메서드를 구별하는 건 관례에 불과합니다. 메서드는 그저 호출할 수 있는 프로퍼티입니다. 값이 아닌, Function 인스턴스를 참조하는 경우는 메서드가 됩니다.

프로퍼티에 액세스하는 방법에는 점 표기법과 괄호 표기법 두 가지가 있습니다.

점 표기법

get = object.property;
object.property = set;

이 코드에서 property는 유효한 자바스크립트 식별자(identifier)여야 합니다. 유효한 식별자는 숫자로 시작할 수 없고, 영문과 숫자(alphanumerical), 밑줄("_"), 달러 기호("$")로 구성됩니다. 예를 들어, object.$1은 유효하지만 object.1은 아닙니다.

document.createElement('pre');

여기서, "createElement" 메서드는 document 객체로부터서 검색되어 호출됩니다.

If you use a method for a numeric literal and the numeric literal has no exponent and no decimal point, leave white-space(s) before the dot that precedes the method call to prevent the dot from being interpreted as a decimal point.

77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// because 77. === 77.0, no ambiguity

괄호 표기법

get = object[property_name];
object[property_name] = set;

괄호 표기법에서 property_name은 문자열이나 심볼(Symbol)이 될 수 있습니다. 이 때, 문자열은 유효한 식별자일 필요가 없습니다. 어떤 값이든 될 수 있습니다. "1foo", "!bar!" 또는 " "(빈칸)도 가능합니다.

document['createElement']('pre');

이 코드는 위의 예와 정확히 같은 일을 합니다.

괄호 앞의 공백도 허용됩니다.

document ['createElement']('pre');

프로퍼티 이름

프로퍼티명은 문자열이나 심볼입니다. 숫자 등의 자료형은 강제로 문자열로 변환됩니다.

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

위 코드는 "value"를 출력합니다. 1이 '1'로 형변환되기 때문입니다.

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

이 코드 역시 "value"를 출력합니다. foo와 bar가 같은 문자열로 변환되기 때문입니다. SpiderMonkey 자바스크립트 엔진에선, 문자열이 "['object Object']"가 될 겁니다.

메서드 바인딩

메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히, this는 메서드 내에 고정되지 않습니다. this는 메서드를 포함하는 객체를 항상 참조하지 않습니다. 대신 this는 함수 호출방식에 따라 "전달됩니다". 메서드 바인딩 참조.

eval에 대한 주의사항

자바스크립트 초심자는 괄호 표기법을 쓸 수 있는 곳에 eval을 사용하는 실수를 합니다. 다음 문법을 자주 볼 수 있을겁니다.

x = eval('document.forms.form_name.elements.' + strFormControl + '.value');

eval은 느리고 가능하다면 피해야 합니다. 또한, strFormControl은 폼 컨트롤의 이름 및 ID에 필요치 않은 식별자를 지녀야 할 겁니다. 대신 괄호 표기법을 사용하는 것이 좋습니다:

x = document.forms["form_name"].elements[strFormControl].value;

스펙

브라우저 호환성

참조

• Object