속성 접근자

시도해 보기

const person1 = {};
person1["firstname"] = "Mario";
person1["lastname"] = "Rossi";

console.log(person1.firstname);
// Expected output: "Mario"

const person2 = {
  firstname: "John",
  lastname: "Doe",
};

console.log(person2["lastname"]);
// Expected output: "Doe"

구문

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;

명세서

브라우저 호환성

같이 보기

• Object
• Object.defineProperty()