配列の map、filter、reduce の違いを説明してください｜技術面接問題

こう聞かれます

「配列の map、filter、reduce の違いを説明してください」
「商品の一覧から、在庫のある品だけの合計金額を出すなら、どう書きますか」
「map と forEach は、どう使い分けていますか」

面接官が見ている点

3 つを「何を返すか」で区別して話せるか
元の配列を変えずに、新しい配列や値を返すと分かっているか
forEach との違いを、戻り値の有無で説明できるか

短い答え

map は全部の要素を別の値に変えた新しい配列を、filter は条件に合う要素だけを残した新しい配列を返します。
reduce は要素を順に足し合わせるなどして、配列を 1 つの値にまとめます。
どれも元の配列は変えずに結果を返すので、絞る、変える、まとめる、の順につなげて書けます。

少し詳しい答え

つなげて使う

偶数だけを残し、10 倍にして、合計を出す例です。

JavaScript

const nums = [1, 2, 3, 4];
const evens = nums.filter(
  (n) => n % 2 === 0
);
const tens = evens.map(
  (n) => n * 10
);
const total = tens.reduce(
  (sum, n) => sum + n,
  0
);
console.log(evens);
console.log(tens);
console.log(total);
console.log(nums);

[ 2, 4 ]
[ 20, 40 ]
60
[ 1, 2, 3, 4 ]

最後の行で、元の nums がそのまま残っているのが要点です。reduce の 2 つ目の引数 0 は、足し始めの値 (初期値) です。

forEach との違い

forEach は、要素ごとに処理を回すだけで、結果の配列を返しません。

JavaScript

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

undefined
[ 2, 4, 6 ]

新しい配列が欲しいときは map、画面に出す、記録を送るなど、外に何かをするだけなら forEach、と使い分けます。

作った物と結べると伝わりやすくなります。たとえば「買い物かごの画面で、filter で選んだ品だけを残し、reduce で合計を出した。元の一覧を変えないので、選び直しても表示がずれなかった」のように話します。

よくある間違い

「map は元の配列を書き換える」と言う map は新しい配列を返し、元の配列はそのままです。ただし中のオブジェクトを関数の中で書き換えると、元の側も変わります
reduce に初期値を渡さない空の配列で初期値が無いと、TypeError になります。合計なら 0 を渡しておきます
新しい配列を作るために forEach と push を使う動きますが、意図が読み取りにくくなります。変える目的なら map、絞る目的なら filter を使います

深掘りの問い

「filter と find の違いは」 filter は合う要素を全部、配列で返します。find は最初に合った 1 つだけを返し、無ければ undefined です
「filter と map と reduce を全部 reduce 1 つで書けますか」書けますが、読む人が意図を追いにくくなります。段ごとに分けると、それぞれの目的が名前で分かる、と答えます
「React で一覧を出すとき、map をどう使いますか」 配列の要素を画面の部品に変えて返し、それぞれに見分けるための key を付ける、と答えます