객체

객체는 서로 관련된 값을 이름표를 붙여 묶습니다. { name: "Coco", age: 3 }에서 pet.name은 "Coco", pet.age는 3입니다.

이름표가 붙은 값

배열은 비슷한 것들을 순서대로 늘어놓은 목록에 알맞습니다. 그런데 세상의 많은 것은 이름표가 붙은 사실 묶음으로 설명하는 편이 낫습니다. 반려동물에게는 이름, 종류, 나이가 있고, 상품에는 이름, 가격, 재고 수가 있습니다. 객체는 바로 이런 것을 저장합니다. 객체는 속성(property)의 모음이고, 속성 하나는 키(이름표)와 값의 짝입니다.

const pet = {
  name: "Coco",
  kind: "cat",
  age: 3,
};
console.log(pet.name);        // Coco
console.log(pet["kind"]);     // cat
console.log(pet.age + 1);     // 4

객체는 중괄호 안에 속성을 키: 값 모양으로 쓰고 사이에 쉼표를 넣습니다. 마지막 속성 뒤의 쉼표도 괜찮습니다. 속성을 읽을 때는 객체, 점, 키 순서로 pet.name처럼 씁니다. 대괄호와 문자열을 쓰는 방법도 있습니다. pet["kind"]처럼 씁니다. 키가 변수에 들어 있을 때(pet[field])나 키에 빈칸이 있을 때는 대괄호를 써야 합니다. 없는 키를 읽으면 undefined가 나옵니다.

속성 바꾸기와 더하기

속성에 대입하면 값이 바뀌고, 새 키에 대입하면 속성이 더해집니다. 배열과 마찬가지로 const로 선언한 객체도 됩니다. 변수는 여전히 같은 객체를 가리키기 때문입니다.

const player = { name: "Sam", score: 0 };
player.score += 10;
player.level = 2;
console.log(`${player.name} ${player.score} ${player.level}`);   // Sam 10 2
delete player.level;
console.log(player.level);   // undefined

객체의 목록

배열과 객체는 자연스럽게 함께 쓰입니다. 대부분의 프로그램은 장바구니, 출석부, 검색 결과처럼 기록을 객체의 배열로 담습니다. 배열을 돌면서 객체마다 필요한 속성을 읽습니다.

const basket = [
  { item: "pen", price: 2 },
  { item: "book", price: 12 },
  { item: "bag", price: 25 },
];
let total = 0;
for (const line of basket) {
  total += line.price;
}
console.log("Total:", total);   // Total: 39

객체 안의 값은 배열이나 다른 객체를 포함해 무엇이든 될 수 있습니다. const user = { name: "Ana", tags: ["admin", "editor"] };라면 user.tags[0]으로 "admin"에 닿습니다. 이런 사슬은 왼쪽부터 읽습니다. user에서 시작해 tags 속성으로 가고, 거기서 인덱스 0을 꺼냅니다.

메서드와 객체의 키 목록

값이 함수인 속성을 메서드라고 합니다. 지금까지 계속 메서드를 불러 왔습니다. console.log는 console 객체의 log 메서드이고, Math.round는 Math의 round 메서드입니다. 메서드 안에서 키워드 this는 그 메서드를 부른 객체를 가리키므로, 메서드는 자기 객체의 속성을 읽을 수 있습니다. 마지막으로 Object.keys(pet)은 키를 배열로 주는데, 여기서는 ["name", "kind", "age"]이고 모든 속성을 돌 때 쓸모가 있습니다.

const counter = {
  count: 0,
  add() {
    this.count++;
  },
};
counter.add();
counter.add();
console.log(counter.count);   // 2

풀이 예시. 책 기록 { title: "Notes", pages: 120, read: 45 }는 Math.round(book.read / book.pages * 100)으로 진행률 38(38퍼센트)을 낼 수 있습니다. 값에 pages와 read라는 이름이 붙어 있어서 b[1] / b[0] 같은 식보다 훨씬 읽기 쉽습니다.

배열일까, 객체일까?

어느 쪽을 쓸지는 간단히 가릴 수 있습니다. 값들이 같은 종류이고 순서가 중요하면(반 학생들의 점수, 요리법의 단계) 배열을 쓰고 위치로 꺼냅니다. 값들이 한 대상에 대한 서로 다른 사실이면(상품의 이름, 가격, 재고) 객체를 쓰고 이름으로 꺼냅니다. 실제 데이터는 대개 둘을 섞습니다. 상품의 배열이 있고, 상품 하나하나가 객체인 식입니다. 실습 상자에서 객체를 통째로 출력하면 {"name":"Coco","age":3}처럼 붙은 모양으로 보입니다. 속성을 하나씩 읽어 출력하면 더 깔끔합니다.