객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)입니다.
객체는 프로퍼티(키-값 쌍)를 저장합니다.
아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있습니다.
obj.property
obj["property"]
. 대괄호 표기법을 사용하면 obj[varWithKey]
같이 변수에서 키를 가져올 수 있습니다.객체엔 다음과 같은 추가 연산자를 사용할 수 있습니다.
delete obj.prop
"key" in obj
for (let key in obj)
대괄호 표기법
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없습니다.
// 문법 에러가 발생합니다.
user.likes birds = true
자바스크립트는 위와 같은 코드를 이해하지 못합니다. user.likes
까지는 이해하다가 예상치 못한 birds
를 만나면 문법 에러를 뱉어냅니다.
'점’은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있습니다. 유효한 변수 식별자엔 공백이 없어야 합니다. 또한 숫자로 시작하지 않아야 하며 $
와 _
를 제외한 특수 문자가 없어야 합니다.
키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있습니다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작합니다.
let user = {};
// set
user["likes birds"] = true;
// get
alert(user["likes birds"]); // true
// delete
delete user["likes birds"];
이제 문법 에러가 발생하지 않네요. 대괄호 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다는 점에 주의하시기 바랍니다. 따옴표의 종류는 상관없습니다.
대괄호 표기법을 사용하면 아래 예시에서 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있습니다.
let key = "likes birds";
// user["likes birds"] = true; 와 같습니다.
user[key] = true;
변수 key
는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있습니다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용됩니다. 이를 응용하면 코드를 유연하게 작성할 수 있습니다.
예시:
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)
그런데 점 표기법은 이런 방식이 불가능합니다.
let user = {
name: "John",
age: 30
};
let key = "name";
alert( user.key ) // undefined