JavaScriptの`map` vs `forEach` vs `filter`：違いをコードでスッキリ理解！

JavaScriptの配列メソッド、map、forEach、filter。似てるけど何が違うの？初心者向けに、簡単なコード例で用途と違いを解説します！🚀

1. map：配列を変換して新しい配列を作る

mapは各要素を加工して新しい配列を返します。元の配列は変わりません。

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(nums); // [1, 2, 3]（元配列そのまま）

2. filter：条件で要素を絞り込む

filterは条件に合う要素だけ集めて新しい配列を返します。こちらも元配列は変わりません。

const nums = [1, 2, 3];
const bigNums = nums.filter(n => n > 1);
console.log(bigNums); // [2, 3]
console.log(nums); // [1, 2, 3]

3. forEach：ただ処理するだけ

forEachは各要素に処理を実行しますが、返り値はundefined。配列自体も変わりません。

const nums = [1, 2, 3];
nums.forEach(n => console.log(`数: ${n}`));
// 数: 1
// 数: 2
// 数: 3
console.log(nums); // [1, 2, 3]

まとめ：注意点と使い所

• map

  • 使い所: 配列を変換して新しい配列を作る（例: Reactでリスト描画、<li>{items.map(item => item.name)}</li>）。
  • 注意点: 返り値を使わないならforEachを検討。重い処理の多重ループは避ける。

• filter

  • 使い所: 条件でデータを絞り込む（例: users.filter(user => user.isActive)で有効ユーザー抽出）。
  • 注意点: 条件が複雑すぎると可読性低下。絞り込み後の配列を必ず使う。

• forEach

  • 使い所: 返り値不要な処理（例: buttons.forEach(btn => btn.addEventListener(...))でイベント設定）。
  • 注意点: 返り値がundefinedなのでチェイン不可。配列変更は別途処理。

ワンポイント: チェインしたいならmapやfilter（例: nums.filter(n => n > 1).map(n => n * 2)）。処理のみならforEach。