Zenn
🔖

JavaScriptのmap()とforEach()の違い：戻り値や使い分けを解説

に公開
JavaScript
TypeScript
Tips
初心者向け
備忘録
tech

はじめに

JavaScriptで配列をループ処理する方法として
map() と forEach() があります。

最初はこの2つの違いがよくわかりませんでした。
「どちらも繰り返し処理できるなら、同じではないのか」と思ったこともあります。

しかし、実際は 「目的」「戻り値」「使いどころ」 が違います。

本記事では
map() と forEach() の違いや使い分けについて解説します。

forEach()とは

forEach() は 「配列の要素を1つずつ処理する」 ためのメソッドです。
単に処理をするだけで、戻り値はありません（undefined）。

例：

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

出力：

0 apple
1 banana
2 orange

✅ ポイント

  • 配列を加工した新しい配列は返さない
  • forEach() は「console.log()で表示する」や「データを保存する」など、「何かを表示・保存する処理」に使用する

map()とは

map() は 「配列の要素を1つずつ処理して、加工後の新しい配列を返す」 メソッドです。

例：

const fruits = ['apple', 'banana', 'orange'];

const upperFruits = fruits.map((fruit) => {
  return fruit.toUpperCase(); // 大文字に変換
});

console.log(upperFruits);

出力：

["APPLE", "BANANA", "ORANGE"]

✅ ポイント

  • 元の配列をもとに、新しい配列を作りたいときに使う
  • 配列の中の値を、別の形に作りかえるときに使う

TypeScriptの場合

map() や forEach() は、TypeScriptでも基本的な動作はJavaScriptと同じです。
違いは、型情報があるかどうかです。

例

const fruits: string[] = ['apple', 'banana', 'orange'];

fruits.forEach((fruit: string, index: number) => {
  console.log(index, fruit);
});

const upperFruits: string[] = fruits.map((fruit: string): string => {
  return fruit.toUpperCase(); // 大文字に変換
});
  • forEach()：戻り値は undefined
  • map()：戻り値の型が自動で string[] になる

→ 「型の恩恵を受けられる」以外の違いはありません。

TypeScriptでも、「戻り値が必要ならmap()、処理だけならforEach()」という使い分けは
JavaScriptと同じ です。

forEach()とmap()の違い

比較ポイント forEach() map()
戻り値 undefined 新しい配列を返す
主な用途 何かを表示・保存する処理 配列の変換・生成

✅ ポイント

  • 新しい配列が欲しい → map()
  • 単純に処理をしたい → forEach()

よく見かける誤解

「map() で console.log だけしている」 処理を見かけることがあります。
戻り値を使わない場合は、forEach() の方が自然です。
このような処理は、forEach()で実装しましょう。
map() は 「戻り値を使う前提の処理」 に使います。

おわりに

当初は「map() で書いておけばいい」と考えていた時期もありましたが、
「戻り値を使うかどうか」という基準で選ぶようにすると、コードが読みやすくなりました。

「配列をどう扱いたいのか」を意識すると
自然に map() と forEach() の使い分けができるようになるはずです。

本記事が参考になれば幸いです。

Discussion