配列の高階関数を使いこなす ― map / filter / reduce / find

導入

第5章で map / filter に触れました。ここでは実務で毎日使う配列メソッドを、用途ごとに使い分けられるように整理します。for を書かずにデータを加工するのがモダンJSの日常です。

説明

代表的な6つを押さえましょう。

const nums = [1, 2, 3, 4, 5, 6];

console.log(nums.filter((n) => n % 2 === 0).join(","));  // 2,4,6（条件で絞る）
console.log(nums.map((n) => n * 10).join(","));          // 10,20,...（各要素を変換）
console.log(nums.reduce((sum, n) => sum + n, 0));        // 21（1つの値に畳み込む）

find は最初に条件を満たした要素、some / every は「1つでも／すべて」を真偽で返します。

const users = [
  { name: "太郎", age: 20 },
  { name: "花子", age: 17 },
  { name: "次郎", age: 25 },
];

console.log(users.find((u) => u.age >= 18).name);  // 太郎（最初に見つかった人）
console.log(users.some((u) => u.age < 18));        // true（未成年が1人でもいる？）
console.log(users.every((u) => u.age >= 18));      // false（全員成人？）

使い分けの目安です。

これらは元の配列を壊さず、新しい結果を返すのがポイントです。.filter(...).map(...) のようにつなげて書けます。

const names = users
  .filter((u) => u.age >= 18)
  .map((u) => u.name);
console.log(names.join("・"));  // 太郎・次郎

やってみよう

reduce で最大値を求めたり、filter と map をつないで「18歳以上の名前一覧」を作ったりしてみましょう。

演習

const scores = [40, 80, 60, 90]; の合計を reduce で求めて表示してください。