속성 접근자는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.

구문

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]);

위의 코드 역시 foobar가 같은 문자열(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;

명세

명세 상태 설명
ECMAScript Latest Draft (ECMA-262)
The definition of 'Property Accessors' in that specification.
Draft  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Property Accessors' in that specification.
Standard  
ECMAScript 5.1 (ECMA-262)
The definition of 'Property Accessors' in that specification.
Standard  
ECMAScript 1st Edition (ECMA-262)
The definition of 'Property Accessors' in that specification.
Standard 초기 정의. JavaScript 1.0에서 구현됨.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Property accessorsChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support Yes

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, Violet-Bora-Lee, mdnwebdocs-bot, Netaras
최종 변경자: alattalatta,