JavaScript
11.2
객체 속성 다루기
11.2.1 객체 속성에 접근하기
배열에서는 데이터에 접근할 때 인덱스를 사용했는데, 객체에서는 속성에 어떻게 접근할까요? 자바스크립트에서는 대괄호 연산자와 마침표 연산자를 사용한 두 가지 접근 방법을 제공합니다.
● 대괄호 연산자로 접근하기
대괄호 연산자는 []를 사용해 객체의 속성에 접근하는 방법으로, 배열에서도 사용할 수 있습니다. 객체의 속성에 접근하려면 객체명 뒤에 대괄호를 붙이고 대괄호 안에 키를 넣습니다. 이때 키는 반드시 큰따옴표나 작은따옴표로 감싼 문자열 형태로 작성해야 합니다.
const person = {
name:"Hong Gildong",
age:20
};
console.log(person["name"]); // Hong GilDong
console.log(person["age"]); // 20
만약 다음과 같이 따옴표를 생략하고 키를 작성하면 객체에서 키가 아닌 name이라는 변수를 찾게 되어 오류가 발생합니다.
const person = {
name:"Hong Gildong"
};
console.log(person[name]); // ReferenceError: name is not defined
그러면 다음과 같이 객체의 속성값이 배열이나 객체 리터럴, 함수라면 어떻게 접근해야 할까요?
11/02/object.js
const person = {
name:{
firstName:"Gildong",
lastName:"Hong"
},
likes:["apple", "samsung"],
printHello:function(){
return "hello";
}
};
원리는 같습니다. 다만, 처음에는 헷갈릴 수 있으니 접근 방법을 같이 확인해 보겠습니다. 속성에 접근하려면 키를 대괄호 안에 문자열로 적는다고 했으니 다음과 같이 작성합니다.
console.log(person["name"]); // { firstName:'Gildong', lastName:'Hong' }
그러면 키가 name인 속성에 접근하는데, 이 속성의 값은 객체 리터럴입니다. 접근한 값도 객체이므로 다시 대괄호 연산자를 사용해 접근합니다. 따라서 다음과 같이 대괄호를 연속으로 사용해 접근하면 됩니다.
// person 객체의 name 속성에 값으로 할당된 객체의 firstName 속성에 접근
console.log(person["name"]["firstName"]); // Gildong
속성값이 배열일 때도 마찬가지입니다. 다음처럼 대괄호 연산자에 키를 사용하면 배열인 속성값에도 접근할 수 있습니다.
console.log(person["likes"]); // [ 'apple', 'samsung' ]
그리고 배열의 요소에는 인덱스로 접근할 수 있었죠? 그래서 객체의 속성값이 배열일 때 배열의 각 데이터에 접근하려면 대괄호 연산자에 인덱스를 사용합니다. 첫 번째 대괄호에 객체 속성의 키를, 두 번째 대괄호에 배열의 인덱스를 넣어 주면 속성값인 배열의 각 데이터에 접근할 수 있습니다.
console.log(person["likes"][0]); // apple
console.log(person["likes"][1]); // samsung
속성값이 함수일 때도 마찬가지겠죠? 다음처럼 키를 이용해 접근하면 속성값은 함수가 됩니다.
console.log(person["printHello"]); // [Function: printHello]
함수를 호출할 때는 ()를 사용하므로 결국 person 객체의 printHello() 함수에는 다음처럼 접근합니다.
console.log(person["printHello"]()); // hello
● 마침표 연산자
마침표 연산자는 .를 이용해 객체 속성에 접근합니다. 객체 속성에 접근하려면 접근할 객체명과 객체 속성의 키를 마침표 연산자로 연결하면 됩니다.
11/02/object_dot.js
const person = {
name:{
firstName:"Gildong",
lastName:"Hong"
},
age:20,
likes:["apple", "samsung"],
printHello:function(){
return "hello";
}
};
console.log(person.name.lastName); // Hong
console.log(person.age); // 20
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello
마침표 연산자를 사용할 때는 키를 바로 적어야 합니다. 만약 다음과 같이 객체 속성에 접근할 때 키를 큰따옴표("")나 작은따옴표('')로 감싸면 오류가 발생합니다.
const person = {
name:"Hong Gildong"
};
console.log(person."name"); // SyntaxError: Unexpected string
그리고 객체의 키 식별자에 공백이 있다면 마침표 연산자는 사용할 수 없고 대괄호 연산자로만 접근할 수 있습니다. 공백이 있는 키는 큰따옴표나 작은따옴표로 감싸야 하는데, 마침표 연산자 접근 방식에서는 큰따옴표나 작은따옴표를 붙여서 사용할 수 없기 때문입니다.
TIP | 객체 속성에 접근할 때 대괄호 연산자와 마침표 연산자 중 어느 방법을 사용하더라도 상관없습니다. 이 책에서는 마침표 연산자를 사용합니다.
const person = {
"phone number":"010-000-0000"
};
console.log(person["phone number"]); // 010-000-0000