객체(object)는 키(key)와 값을 한 쌍씩 묶은 속성(property)을 여럿 담은 값입니다. 메뉴 한 줄의 이름과 가격처럼, 뜻이 다른 값 여럿을 하나로 묶어 두고 키로 꺼낼 때 씁니다.
메뉴 한 줄을 배열 ['커피', 4000]에 담으면 0번 칸이 이름이고 1번 칸이 가격이라는 것을 따로 기억해야 합니다. 객체는 값마다 키를 붙여 담으므로 item.price처럼 키로 꺼냅니다.
이 레슨에서는 객체를 만들어 속성을 꺼내고 더하고 바꾸는 법을 보고, 키를 잘못 써서 꺼내면 무엇이 나오는지 그림에서 먼저 맞혀 봅니다.
이 단원(객체)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.
파이썬을 배웠다면 — 이 단원에서 다른 곳
파이썬을 배웠다면 이 단원에서 다른 곳: 딕셔너리와 달리 없는 키로 꺼내도 KeyError로 멈추지 않음(무엇이 나오는지는 이 레슨 그림에서 맞혀 보세요) · 배열에 in을 쓰면 값이 아니라 자리 번호를 물음(이 레슨 '자주 틀리는 곳' 넷째) · for...in은 배열에서 값이 아니라 자리 번호를 글자로 꺼냄(객체 돌기) · a, b = b, a는 오류 없이 지나가지만 두 값을 맞바꾸지 않음(구조 분해로 꺼내기).
1객체를 만들고 속성 꺼내기
중괄호 안에 키: 값을 쉼표로 나열하면 객체가 하나 만들어집니다. 속성이 여럿이면 한 줄에 하나씩 써도 되고, 마지막 속성 뒤에도 쉼표를 둘 수 있습니다.
const item = {
name: '커피',
price: 4000,
};
console.log(item);
console.log(item.name);
console.log(item['price']);{ name: '커피', price: 4000 }
커피
4000속성 값은 item.name처럼 점 뒤에 키를 쓰거나, item['price']처럼 대괄호 안에 키를 문자열로 써서 꺼냅니다.
객체를 통째로 찍으면 Node는 중괄호 안쪽에 빈칸을 하나씩 두고 속성을 키: 값 꼴로 찍습니다. 키 name은 따옴표 없이 찍지만, 한글 키는 코드에 따옴표 없이 썼어도 { '커피': 4000 }처럼 따옴표로 감싸 찍습니다.
typeof item은 'object'입니다. 배열의 typeof가 'object'였던 것도(배열과 이름 둘) 배열이 객체의 한 종류이기 때문입니다.
그림은 객체도 배열처럼 이름 칸 밖에 따로 그리고, 머리에 종류 이름 Object를 붙입니다. 칸 안에는 키와 값 한 쌍이 한 줄씩 있고, 이름 item은 그 객체를 가리킵니다(규칙 3).
중괄호는 덩어리에도 쓰입니다. 그래서 화살표 함수(화살표 함수와 함수 값)가 객체를 바로 돌려줄 때는 (n) => ({ name: n })처럼 괄호로 감쌉니다. 괄호가 없으면 중괄호를 함수 몸으로 읽어 undefined를 돌려줍니다.
2속성 더하기와 바꾸기
그림의 코드입니다.
const item = {
name: '커피',
price: 4000,
};
console.log(item.name);
item.size = 'L';
item.price = 4500;
console.log(item.prce);커피
undefined6번 줄처럼 없는 키에 대입하면 키 'size'와 값 'L'을 한 쌍으로 새로 담습니다. 7번 줄처럼 이미 있는 키에 대입하면 그 키의 값만 4500으로 바뀝니다. 한 객체에 같은 키는 하나뿐이라 줄이 늘지 않습니다.
item은 const로 만든 이름이지만 6, 7번 줄은 됩니다. const는 이름을 다시 붙이는 것만 막을 뿐, 그 이름이 가리키는 객체를 얼리지 않습니다(규칙 3).
3없는 속성을 꺼내면
2절 코드 8번 줄의 prce는 price를 잘못 쓴 키입니다. 객체에 그런 키가 없으면 멈추지 않고 undefined가 나옵니다. 문자열에서 없는 자리를 꺼냈을 때와 같습니다(인덱스와 자르기).
속성이 있는지는 in 연산자로 묻습니다. 'size' in item은 키 'size'가 item에 있으면 true, 없으면 false입니다.
const item = { name: '커피' };
item.size = 'L';
console.log('size' in item);
console.log('hot' in item);true
falseundefined가 나온 뒤 그 값에서 속성을 또 꺼내면 어떻게 될까요? 아래 코드는 메뉴 이름의 글자 수를 세려다 키를 잘못 썼습니다. 무엇을 찍을지 답을 정한 뒤 펼쳐 보세요.
const item = { name: '커피' };
console.log(item.nmae);
const n = item.nmae.length;
console.log(n);실행 결과 보기
undefinedmain.js:3const n = item.nmae.length; ^ TypeError: Cannot read properties of undefined (reading 'length') at main.js:3:21예상과 다르면 그곳이 배울 곳입니다. 2번 줄은 없는 속성이라 undefined를 찍고 지나갑니다. 3번 줄은 그 undefined에서 length를 또 꺼내려 해 TypeError로 멈추고, 4번 줄은 실행되지 않습니다.
오류 메시지의 reading 'length'는 꺼내려던 속성이고, undefined는 그 앞 item.nmae의 값입니다. 그래서 고칠 곳은 length가 아니라 그 앞의 nmae입니다.
예제
이름이 가리키는 키로 꺼내기
손님이 고른 메뉴 이름 '라테'에 이름 pick이 붙어 있습니다. 메뉴 표에서 그 메뉴의 가격을 꺼냅니다.
const menu = {
커피: 4000,
라테: 4500,
};
console.log(menu);
const pick = '라테';
console.log(menu[pick]);
console.log(menu.pick);{ '커피': 4000, '라테': 4500 }
4500
undefined7번 줄의 대괄호 안 pick은 이름이라, 그 이름이 가리키는 문자열 '라테'를 키로 씁니다. 8번 줄의 점 뒤 pick은 키 글자 그대로라서, 키 'pick'을 찾다가 없으니 undefined를 찍습니다.
키를 글자 그대로 쓸 때는 점이나 ['라테']를, 이름이 가리키는 문자열을 키로 쓸 때는 [pick]처럼 따옴표 없는 대괄호를 씁니다. 5번 줄은 1절에서 본 대로 한글 키를 따옴표로 감싸 찍습니다.
과목 끝의 할 일 앱에서는 할 일 한 건을 객체 하나에 담고, 번호 id · 할 일 글 text · 끝냈는지 done 세 속성을 둡니다.
자주 틀리는 곳
틀린 생각: 객체에 없는 키로 속성을 꺼내면 오류로 멈춘다.
없는 이름을 쓰면 ReferenceError로 멈추니(파이썬 딕셔너리도 없는 키에서 KeyError로 멈춥니다), 없는 키도 그럴 것 같습니다.
맞는 규칙: 없는 속성을 꺼내면 오류 없이 undefined가 나옵니다(3절). 컴퓨터는 prce가 price의 오타인 줄 모르고 쓴 대로 찾습니다(규칙 6). 그래서 찍힌 undefined를 보면 키 글자부터 맞춰 봅니다.
틀린 생각: 어떤 키든 점 뒤에 쓸 수 있다.
1절에서 키를 점 뒤에도 쓰고 대괄호 안에도 썼으니, 아무 키나 점 뒤에 써도 될 것 같습니다.
const config = {
'user-name': '민지',
};
console.log(config.user-name);main.js:4console.log(config.user-name); ^ ReferenceError: name is not defined at main.js:4:25점 뒤의 user-name은 빼기 식 config.user - name으로 읽혀, 이름 name을 찾다가 멈췄습니다. 브라우저 콘솔에서는 name이라는 이름이 이미 있어 오류 없이 NaN이 찍히기도 합니다.
맞는 규칙: 빼기(-)나 빈칸이 든 키는 config['user-name']처럼 대괄호 안에 문자열로 씁니다. 빈칸이 든 키 '녹차 라테'도 menu['녹차 라테']로 꺼내고, 점 뒤에 쓰면 SyntaxError로 멈춥니다.
틀린 생각: item[name]과 item['name']은 같다.
점 뒤에는 따옴표 없이 item.name이라 쓰니, 대괄호 안에서도 따옴표를 빼도 될 것 같습니다.
맞는 규칙: 대괄호 안은 계산할 식입니다. 예제의 menu[pick]이 이름 pick이 가리키는 '라테'를 키로 쓴 것처럼, item[name]은 이름 name이 가리키는 값을 키로 쓰려 합니다. 그런 이름이 없으면 ReferenceError로 멈춥니다. 키 글자 그대로는 item['name']처럼 따옴표로 감쌉니다.
틀린 생각: '커피' in orders는 배열 orders에 '커피'가 있는지 묻는다.
in은 '안에'라는 뜻이고 파이썬에서도 리스트 안에 값이 있는지 물으니, 배열에서도 그럴 것 같습니다.
const orders = ['커피', '라테'];
console.log('커피' in orders);
console.log(0 in orders);false
true맞는 규칙: in은 왼쪽을 키로 보고 그 키가 있는지 묻습니다. 배열에서는 자리 번호가 키라서 0 in orders가 true입니다. 값이 있는지는 문자열에서처럼 includes로 물어, orders.includes('커피')가 true입니다(문자열 메서드).
확인 문제
1. 무엇이 찍힐까요? 두 줄을 글자 그대로 쓰세요.
const cup = { size: 'L' };
cup.size = 'M';
cup.hot = true;
console.log(cup);
console.log(cup.cold);힌트
줄마다 그 키가 객체에 이미 있는지 봅니다.
정답
{ size: 'M', hot: true }
undefined2번 줄은 이미 있는 키 size의 값을 'M'으로 바꾸고, 3번 줄은 키 hot과 값 true를 한 쌍으로 새로 담습니다. 5번 줄의 cold는 담은 적 없는 키라 오류 없이 undefined가 나옵니다.
흔한 오답은 첫 줄에 키 size를 두 번 쓴 것입니다(size: 'L'과 size: 'M'). 2번 줄이 한 쌍을 새로 담는다고 본 것입니다. 이미 있는 키에 대입하면 그 자리의 값만 바뀝니다. 둘째 줄을 오류로 썼다면 없는 속성에서 멈춘다고 본 것입니다(없으면 오류라는 생각).
2. 옷 가게의 치수 목록입니다. 무엇이 찍힐까요? 세 줄을 글자 그대로 쓰세요.
const sizes = ['S', 'M', 'L'];
console.log(1 in sizes);
console.log(3 in sizes);
console.log('M' in sizes);힌트
배열 sizes의 자리 번호를 먼저 적어 봅니다.
정답
true
false
falsesizes의 자리 번호는 0, 1, 2입니다. 배열에서 in은 자리 번호를 물으므로 1은 true, 3은 false입니다. 'M'은 값이지 자리 번호가 아니라서 false입니다.
흔한 오답은 셋째 줄을 true로 쓴 것입니다. in이 값이 있는지 묻는다고 본 것입니다. 값은 sizes.includes('M')으로 묻습니다. 둘째 줄을 true로 썼다면 칸 수 3을 자리 번호로 본 것입니다.
3. 동물원의 동물 수를 객체에 적습니다. 무엇이 찍힐까요? 보기에서 고르세요.
const zoo = { 사자: 2 };
zoo['기린'] = 3;
console.log(zoo);- ①
{ 사자: 2, 기린: 3 } - ②
{ '사자': 2, '기린': 3 } - ③
{ 사자: 2, '기린': 3 }
힌트
코드에 키를 쓴 꼴과 Node가 찍는 꼴은 다를 수 있습니다.
정답
{ '사자': 2, '기린': 3 }②입니다. 2번 줄은 없는 키 '기린'에 대입해 한 쌍을 새로 담습니다. Node는 한글 키를 코드에 어떻게 썼든 따옴표로 감싸 찍습니다.
- ① 코드에 쓴
{ 사자: 2 }꼴 그대로 찍힌다고 봤습니다. - ③ 키마다 코드에 쓴 꼴을 따른다고 봤습니다. 대괄호에 문자열로 담은 키든 따옴표 없이 쓴 키든, 한글 키는 똑같이 따옴표로 찍힙니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
2절 그림 코드를 main.js에 저장해 돌린 뒤, 8번 줄의 prce를 price로 고칩니다. 둘째 줄에 무엇이 찍힐지 먼저 적고, 고쳐 돌려서 맞춰 봅니다. 4500이 아니면 2절의 7번 줄 설명을 다시 봅니다.
저장하고 돌리는 법은 내 컴퓨터에서 돌려 보기에 있습니다.