속성 접근자
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
속성 접근자는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.
시도해보기
구문
object.property;
object["property"];
설명
객체는 속성의 이름을 키로 사용하는 연관 배열(다른 이름으로는 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하곤 하지만, 서로의 차이는 관례에 불과합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 Function
을 가리키는 참조라면 그 속성을 메서드라고 합니다.
속성에 접근하는 법은 점 표기법과 괄호 표기법 두 가지가 있습니다.
점 표기법
get = object.property;
object.property = set;
이 코드에서, property
는 유효한 JavaScript 식별자여야합니다. 따라서 object.$1
은 유효하지만 object.1
은 아닙니다.
document.createElement("pre");
여기서는 "createElement"라는 이름을 가진 메서드를 document
에서 찾아 호출하고 있습니다.
소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록 해야 합니다.
(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");
속성 이름
속성의 이름은 문자열이나 Symbol
입니다. 숫자 등의 다른 자료형은 문자열로 변환됩니다.
var object = {};
object["1"] = "value";
console.log(object[1]);
위 코드의 1
은 '1'
로 변환되므로, 출력 결과는 "value"입니다.
var foo = { unique_prop: 1 },
bar = { unique_prop: 2 },
object = {};
object[foo] = "value";
console.log(object[bar]);
위의 코드 역시 foo
와 bar
가 같은 문자열(SpiderMonkey JavaScript 엔진에서는 문자열 "['object Object']
")로 변환되므로, 출력 결과는 동일하게 "value"입니다.
메서드 바인딩
메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 this
는 메서드 내에 고정되지 않으므로 this
가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, this
는 함수 호출 방식에 따라 "전달"됩니다. 메서드 바인딩을 참고하세요.
eval()
주의사항
JavaScript 초심자로써는 괄호 표기법을 사용할 수 있는 장소에 eval()
을 남용하기 쉽습니다. 간혹 스크립트에서 다음과 같은 구문을 찾아볼 수 있습니다.
x = eval("document.forms.form_name.elements." + strFormControl + ".value");
eval()
은 느리고, 가능하다면 최대한 피해야 합니다. 또한, strFormControl
은 유효한 식별자여야 하지만, 폼 컨트롤의 ID나 이름은 식별자가 아닐 수도 있습니다. 따라서 괄호 표기법을 대신 사용하는 것이 좋습니다.
x = document.forms["form_name"].elements[strFormControl].value;
명세서
Specification |
---|
ECMAScript Language Specification # sec-property-accessors |
브라우저 호환성
BCD tables only load in the browser