JavaScript：オブジェクトとMap

出力 == 田中 / 30（2行）

ドットでつないで person.name のように書く。

const person = { name: "田中", age: 30 };

console.log(person.name);
console.log(person.age);

配列は番号、オブジェクトはキーで引く。person[0] とは書けない点に注意。

解答 == B

JavaScriptは存在しないキーに寛容。

B

エラーで止まらないのが逆に危険。undefined のまま計算に使うと NaN になり、原因が離れた場所で発覚する。

出力 == { theme: 'light', fontSize: 14 }

config.fontSize = 14; と書くだけで追加される。

const config = { theme: "light" };
config.fontSize = 14;
console.log(config);

配列の push にあたる操作。代入するだけで追加されるので、追加と更新の書き方が同じ。キー名に日本語も使えるが、英数字にするのが実務の慣習。

const scores = { 佐藤: 82, 鈴木: 95 };

for (const [name, score] of Object.____(scores)) {
  console.log(`${name}：${score}点`);
}

出力 == 佐藤：82点 / 鈴木：95点（2行）

「項目」を意味する英単語。[キー, 値] のペアの配列を返す。

entries

Object.entries() は配列の entries() と同じ発想。JS05・JS06で使った分割代入 [a, b] がここでも活きる。

解答 == B

JS06で配列にも似た演算子を使った。

B

in はキーを探す（値ではない）。includes は配列用、has は Map 用で、それぞれ対象が違う。

出力 == 田中（営業）

const { name, dept } = employee; と書くと2つ同時に取り出せる。

const employee = { name: "田中", dept: "営業", age: 30 };

const { name, dept } = employee;

console.log(`${name}（${dept}）`);

変数名とキー名が一致していれば自動で対応する。必要な項目だけ取り出せるので、APIの応答から欲しいデータだけ抜くときに多用する。

const user = { name: "田中" };
console.log(user.address____city ?? "未登録");

出力 == 未登録

「もし存在すれば続ける」を表す記号。クエスチョンマークとドットを組み合わせる。

?.

オプショナルチェーン。これが無いと Cannot read properties of undefined というエラーで止まる。APIの応答を扱うときの必需品。

解答 == B

同じキーを重複して持てるか？

B

キーは重複できないので、同じキーへの代入は常に上書き。これを利用して「最新の値で更新する」処理が書ける。

出力 == { A: 3, B: 2, C: 1 }

空のオブジェクト count = {} を用意し、count[o] = (count[o] || 0) + 1 で数え上げる。

const orders = ["A", "B", "A", "C", "B", "A"];

const count = {};

for (const o of orders) {
  count[o] = (count[o] || 0) + 1;
}

console.log(count);

(count[o] || 0) + 1 は集計の最重要イディオム。初回は undefined なので || 0 で 0 に置き換えている。JS06で二重ループになった重複カウントが、1回のループで書けるようになった。

出力 == 244

Object.values() で値の配列が取れる。あとは for...of で足し込む。

const scores = { 佐藤: 82, 鈴木: 95, 高橋: 67 };

let total = 0;

for (const s of Object.values(scores)) {
  total += s;
}

console.log(total);

Object.values() はただの配列を返すので、JS06で学んだ配列操作がすべて使える。

3行の項目＋最終行 項目数：3

Object.entries() で回す。項目数は Object.keys(employee).length。

const employee = { name: "田中", dept: "営業", age: 30 };

for (const [key, value] of Object.entries(employee)) {
  console.log(`${key}: ${value}`);
}

console.log(`項目数：${Object.keys(employee).length}`);

オブジェクトには .length が無いので、Object.keys() で配列にしてから length を取る。APIの応答の中身をとりあえず全部見たいときにこの形をよく使う。

3行の成績＋最終行 平均：81.3点

Object.entries() で回す。平均は Object.values() の合計を件数で割り、toFixed(1) で小数1桁にする。

const scores = { 佐藤: 82, 鈴木: 95, 高橋: 67 };

for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}：${score}点`);
}

const values = Object.values(scores);
let total = 0;
for (const v of values) {
  total += v;
}

console.log(`平均：${(total / values.length).toFixed(1)}点`);

JS06のS02では names と scores の2本を番号でひも付けたが、オブジェクトなら1本で完結し順序ズレも起きない。同じ問題の改良版として見比べてほしい。

該当1件を出力後、最終行 要発注：1品目

Object.entries() で回して if で判定。カウンタはループの前に用意する。

const stock = { ボールペン: 120, ノート: 8, 付箋: 67 };
const threshold = 10;

let count = 0;

for (const [name, num] of Object.entries(stock)) {
  if (num < threshold) {
    console.log(`⚠${name}：${num}個`);
    count++;
  }
}

console.log(`要発注：${count}品目`);

JS06の在庫レポートをオブジェクトで書き直した形。商品名と在庫数が1つにまとまっているので、indexOf で引く必要がなくなった。

商品別3行＋最終行 合計：3,800円

totals[name] = (totals[name] || 0) + amount で足し込む。配列の要素は [name, amount] の形なので分割代入で受け取れる。

const sales = [["A", 1200], ["B", 800], ["A", 500], ["C", 300], ["B", 1000]];

const totals = {};

for (const [name, amount] of sales) {
  totals[name] = (totals[name] || 0) + amount;
}

let sum = 0;

for (const [name, amount] of Object.entries(totals)) {
  console.log(`${name}：${amount.toLocaleString()}円`);
  sum += amount;
}

console.log(`合計：${sum.toLocaleString()}円`);

D09の数え上げを加算に変えただけで売上集計になる。配列の配列（JS06）＋オブジェクト集計（JS07）の合わせ技で、実務のデータ処理の大半がカバーできる。

出力5行が完全一致

res.data.users で階層をたどる。ユーザーは for...of で回し、分割代入 { name, age } で取り出せる。

const res = { status: 200, data: { users: [{ name: "田中", age: 30 }, { name: "鈴木", age: 25 }] } };

const users = res.data.users;

console.log(`ステータス：${res.status}`);
console.log(`ユーザー数：${users.length}人`);

let totalAge = 0;

for (const { name, age } of users) {
  console.log(`${name}（${age}歳）`);
  totalAge += age;
}

console.log(`平均年齢：${totalAge / users.length}歳`);

APIの応答はほぼこの形（オブジェクトの中に配列、配列の中にオブジェクト）。for (const { name, age } of users) のようにループの受け取り側で直接分割代入できるのがJavaScriptの便利なところ。