JavaScript：配列の高階関数（map / filter / reduce）

出力 == [ 2, 4, 6, 8 ]

nums.map(n => n * 2) と書く。

const nums = [1, 2, 3, 4];
console.log(nums.map(n => n * 2));

map の中の関数は要素1つを受け取って、変換後の値を返す。for ループ3行が1行になる。

解答 == C

map は変換であって絞り込みではない。

C

map は要素数が変わらない。中身が変わるだけ。減らしたいときは filter を使う。

出力 == [ 8, 10, 6 ]

nums.filter(n => n > 5) と書く。条件が true の要素だけ残る。

const nums = [3, 8, 1, 10, 6];
console.log(nums.filter(n => n > 5));

filter の中の関数はtrue / false を返す。true になった要素だけが新しい配列に入り、元の並び順は保たれる。

const nums = [10, 20, 30];
console.log(nums.____((sum, n) => sum + n, 0));

出力 == 60

「集約する」という意味の英単語。第2引数が初期値。

reduce

第1引数 sum が積み上げていく箱、第2引数 n が今回の要素。最後の 0 が箱の初期値。

解答 == B

波カッコを書いた場合、値を返すには何が必要か。

B

{ } を書いたら return が必須。この書き忘れは頻出のバグで、結果が undefined だらけになったらまずここを疑う。

出力 == [ 4, 16, 36 ]

nums.filter(...).map(...) のように続けて書ける。

const nums = [1, 2, 3, 4, 5, 6];
console.log(nums.filter(n => n % 2 === 0).map(n => n ** 2));

絞ってから変換するのが基本の順番。先に map すると不要な要素まで計算することになり無駄が出る。

const scores = [82, 45, 91];
console.log(scores.map(s => ____));

出力 == [ '合格', '不合格', '合格' ]

三項演算子を使う。条件 ? 真の値 : 偽の値。

s >= 60 ? "合格" : "不合格"

要素数は減らずに中身だけが変わる。D03の filter（要素が減る）との違いを見比べてほしい。

解答 == B

1件だけ欲しいときのメソッド。

B

filter は配列を返し、find は要素そのものを返す。見つからない場合 find は undefined。1件だけ欲しいのに filter を使うと [0] を付ける必要が出て読みにくい。

出力 == [ '田中', '高橋' ]

filter で絞ってから map で名前を取り出す。

const users = [
  { name: "田中", score: 82 },
  { name: "鈴木", score: 45 },
  { name: "高橋", score: 91 },
];

console.log(users.filter(u => u.score >= 60).map(u => u.name));

オブジェクトの配列を絞って必要な項目だけ抜く——APIの応答を扱うときに最も頻繁に書く形。実務コードの定番中の定番。

出力 == 430

reduce の中で Number() に通す。初期値は 0。

const raw = [" 100 ", "250", " 80 "];
console.log(raw.reduce((sum, r) => sum + Number(r), 0));

変換と集計を同時に行えるのが reduce の強み。.map(Number).reduce(…) と2段階に分けても書けるが、1回で済むならこちらが速い。

出力3行が完全一致

先に taxed 配列を作ってから、prices を map((p, i) => ...) で回すと i で対応が取れる。

const prices = [1200, 850, 3400];

const taxed = prices.map(p => Math.round(p * 1.1));

prices.forEach((p, i) => {
  console.log(`${p.toLocaleString()}円 → ${taxed[i].toLocaleString()}円`);
});

map と forEach の使い分けがポイント。データを作るのが map、画面に出すだけなのが forEach。map の第2引数で番号（index）も受け取れる。

出力2行が完全一致

passed 配列を作り、人数は length、平均は reduce で合計してから割り、toFixed(1) で小数1桁にする。

const scores = [82, 45, 91, 67, 38, 76];

const passed = scores.filter(s => s >= 60);
const average = passed.reduce((sum, s) => sum + s, 0) / passed.length;

console.log(`合格者：${JSON.stringify(passed)}`);
console.log(`${passed.length}人 / 平均${average.toFixed(1)}点`);

JS05のS03ではループとカウンタで書いた処理がfilter 1行＋reduce 1行になった。抽出した配列があれば件数も平均もすぐ出せる。

出力2行が完全一致

find は見つからないと undefined を返す。?. と ?? を組み合わせると安全に書ける（JS07）。

const users = [
  { id: 1, name: "田中" },
  { id: 2, name: "鈴木" },
  { id: 3, name: "高橋" },
];

const found = users.find(u => u.id === 2);
const notFound = users.find(u => u.id === 99);

console.log(`id=2 → ${found?.name ?? "見つかりません"}`);
console.log(`id=99 → ${notFound?.name ?? "見つかりません"}`);

find の戻り値は undefined になりうるので、そのまま .name を付けるとエラーで止まる。JS07のオプショナルチェーン ?. がここで必須になる。

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

reduce の初期値を {} にし、(acc, [name, amount]) => { acc[name] = (acc[name] || 0) + amount; return acc; } とする。{ } を書いたので return を忘れないこと。

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

const totals = sales.reduce((acc, [name, amount]) => {
  acc[name] = (acc[name] || 0) + amount;
  return acc;
}, {});

Object.entries(totals).forEach(([name, amount]) => {
  console.log(`${name}：${amount.toLocaleString()}円`);
});

const sum = Object.values(totals).reduce((s, v) => s + v, 0);
console.log(`合計：${sum.toLocaleString()}円`);

reduce の初期値は数値だけでなくオブジェクトでもよい。JS07で for ループを使って書いた集計が reduce 1つに収まる。ただし return acc; を忘れると次の周回で undefined になるので要注意。

出力3行が完全一致

[...products] でコピーしてから sort((a, b) => b.sales - a.sales)、slice(0, 3)、forEach((p, i) => ...) とつなぐ。

const products = [
  { name: "ノートPC", sales: 128000 },
  { name: "マウス", sales: 6400 },
  { name: "モニター", sales: 45000 },
  { name: "キーボード", sales: 8500 },
];

[...products]
  .sort((a, b) => b.sales - a.sales)
  .slice(0, 3)
  .forEach((p, i) => {
    console.log(`${i + 1}位 ${p.name}：${p.sales.toLocaleString()}円`);
  });

メソッドを縦に並べて書くと処理の流れが上から読める。コピー → 並べ替え → 切り出し → 出力、という手順がそのままコードの形になっている。sort は元を壊すので [...products] は必須（JS06）。