설명
number와 string 같은 원시 자료형 말고도, JavaScript에는 object라는 또 다른 중요한 자료형이 있어요.
객체는 키-값 쌍의 모음이에요.
그래서 다른 언어에서 흔히 맵이나 딕셔너리라고 부르는 것과 같은 방식으로 사용할 수 있어요.
다른 언어에서는 맵에 들어 있는 모든 값이 같은 자료형이어야 하는 경우가 많아요.
JavaScript에서는 키의 자료형만 제한되는데, 키는 반드시 string이어야 해요.
한 객체 안의 값들은 서로 다른 자료형일 수 있어요.
숫자 같은 원시 자료형일 수도 있고, 배열이나 다른 객체, 심지어 함수일 수도 있어요.
덕분에 객체는 활용도가 매우 높아서, JavaScript에서 객체 지향 프로그래밍(OOP)의 핵심 요소이기도 해요.
이하에서는 객체를 모음이나 맵으로서 살펴볼게요.
객체의 다른 활용법은 다른 개념에서 다뤄요. 예를 들어 클래스를 참고해요.
객체 만들기
중괄호를 사용해서 객체를 만들어요.
항목을 몇 개 바로 넣을 수도 있어요.
그럴 때는 키를 먼저 쓰고, 콜론과 값을 이어서 적어요.
const emptyObject = {};
const obj = {
favoriteNumber: 42,
greeting: 'Hello World',
useGreeting: true,
address: {
street: 'Trincomalee Highway',
city: 'Batticaloa',
},
fruits: ['melon', 'papaya'],
addNumbers: function (a, b) {
return a + b;
},
};
JavaScript에서는 마지막 항목 뒤에 오는 쉼표는 있어도 되고 없어도 돼요.
키는 문자열이어야 하는데 왜 따옴표로 감싸지 않는지 궁금할 수 있어요.
이건 축약 표기법이에요.
키가 JavaScript 식별자 이름 규칙을 따르면 따옴표를 생략할 수 있어요.
이름에 특수 문자가 들어가는 키는 일반적인 문자열 표기법을 사용해야 해요.
const obj = {
'1keyStartsWithNumber': '...',
'key/with/slashes': '...',
'key-with-dashes': '...',
'key with spaces': '...',
'#&()[]{}èä樹keyWithSpecialChars': '...',
};
값 가져오기
주어진 키의 값을 가져오는 방법에는 점 표기법과 대괄호 표기법, 두 가지가 있어요.
const obj = { greeting: 'hello world' };
obj.greeting;
// => hello world
obj['greeting'];
// => hello world
// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world
축약형인 점 표기법에도 따옴표를 생략할 때와 같은 제약이 있어요.
키가 식별자 이름 규칙을 따를 때만 사용할 수 있어요.
값 추가하거나 바꾸기
할당 연산자 =를 사용해서 값을 추가하거나 바꿀 수 있어요.
여기서도 점 표기법과 대괄호 표기법을 모두 사용할 수 있어요.
const obj = { greeting: 'hello world' };
obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';
obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';
const key = 'new key 3';
obj[key] = 'new value 3';
항목 삭제하기
delete 키워드를 사용해서 객체에서 키-값 쌍을 삭제할 수 있어요.
const obj = {
key1: 'value1',
key2: 'value2',
};
delete obj.key1;
delete obj['key2'];
키가 있는지 확인하기
hasOwnProperty 메서드로 객체에 특정 키가 있는지 확인할 수 있어요.
const obj = { greeting: 'hello world' };
obj.hasOwnProperty('greeting');
// => true
obj.hasOwnProperty('age');
// => false
객체 순회하기
객체의 모든 키를 순회하는 특별한 for...in문이 있어요.
const obj = {
name: 'Ali',
age: 65,
};
for (let key in obj) {
console.log(key, obj[key]);
}
// name Ali
// age 65
미묘한 오류를 피하려면 for...in문이 키를 임의의 순서로 방문한다고 항상 가정해야 해요.
또한 for...in문은 순회할 때 상속받은 키도 포함한다는 점을 알아두세요.
학습 연습 문제
