01 / 04
番号で覚えるのはつらい
本の情報を配列で持つと ["そらのほん", 800, 120] のようになる。
でもこれ、1 番が値段で 2 番がページ数だと覚えていないと読めない。番号は「順番」を表すのは得意でも、「これは何の値か」は教えてくれないんだ。
くり返しとデータの持ち方
INPUT · スライド
オブジェクトで名前をつけて持つ
01 / 04
番号で覚えるのはつらい
02 / 04
オブジェクトは名前で持つ
値それぞれに名前をつけて持てるのがオブジェクト。{ } の中に 名前: 値 を , で区切って並べるよ。
この「名前と値の組」ひとつひとつをプロパティと呼ぶ。取り出すときは オブジェクト.名前 と書くだけだよ。
const book = { title: "そらのほん", price: 800 };console.log(book.title);console.log(book.price);実行結果
そらのほん 800
03 / 04
取り出した値はふつうの値
book.price は配列から取り出したときと同じで、ただの数値として扱える。
計算にもテンプレートリテラルへの埋め込みにも使えるよ。
const item = { name: "パン", price: 160, count: 3 };console.log(`${item.name}を${item.count}こで${item.price * item.count}円`);実行結果
パンを3こで480円
04 / 04
配列との使い分け
2つは役割が違うよ。
- 配列 … 同じ種類のものを並べて持つ。「果物の一覧」「点数の一覧」
- オブジェクト … 1つのものについてのいろいろな情報を持つ。「1冊の本のタイトル・値段・ページ数」
迷ったら「順番に意味があるか」を考えよう。あるなら配列、無いならオブジェクトだよ。
const fruits = ["りんご", "みかん"];const user = { name: "ゆい", age: 12 };console.log(fruits[0]);console.log(user.name);実行結果
りんご ゆい