オブジェクト

オブジェクトは、関係のある値を名前の下にまとめます。{ name: "Coco", age: 3 } では、pet.name は "Coco"、pet.age は 3 になります。

ラベルのついた値

配列は、似たものを順番に並べたリストに向いています。でも世の中の多くのものは、ラベルのついた事実の集まりで表すほうがうまくいきます。ペットには名前と種類と年齢があり、商品には名前と価格と在庫数があります。オブジェクトはまさにそれを保存します。オブジェクトはプロパティの集まりで、それぞれのプロパティはキー（ラベル）と値の組です。

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

オブジェクトは波かっこの中に、それぞれのプロパティを key: value の形で書き、あいだをコンマで区切ります。最後のプロパティのあとにコンマを置いてもかまいません。プロパティを読むには、オブジェクト、ドット、キーの順に書きます。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} のようなつめた形で表示されます。プロパティを一つずつ読むほうが、すっきりした出力になります。