【JavaScript】map, forEach, filterの違い

2025.2.222025.2.22Writer: hinakoComment: 0

開発ブログ

こんにちは！エンジニアのひなこです！

JavaScriptでコーディングする時、ループ処理をしたい時がありますよね〜

その時にforEachやmapやfilterがよく使われますが、その違いって何だろうって思う時がありますよね〜

今回改めて調べたので、今後状況に合わせて使い分けられるように、まとめたいと思います！

まず、mapとforEachは、MDN Web Docsにはそれぞれ下記のように説明されています。

map

「map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。」

forEach

「forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行します。」

簡単にいうと、

mapとforEachは、どちらも配列の要素に対しコールバック関数の処理を行うメソッドです。

違いは、mapの方は配列データを返り値(return)とでき、forEachは返り値は設定できないことです。

map

const actorNameArray = ["최우식", "박보영", "이준영", "전소니", "김재욱"];

const updatedNames = actorNameArray.map((name) => name + "👍");

console.log(updatedNames);
// > Array ["최우식👍", "박보영👍", "이준영👍", "전소니👍", "김재욱👍"]

// ------------------------------------------------------------------

const updatedNames = actorNameArray.map((name) => {
  return name + "👍"; // ブロック構文を使う場合はreturnが必要
});

console.log(updatedNames);
// > Array ["최우식👍", "박보영👍", "이준영👍", "전소니👍", "김재욱👍"]

const actorNameArray = ["최우식", "박보영", "이준영", "전소니", "김재욱"];

const updatedNames = actorNameArray.map((name) => name + "👍");

console.log(updatedNames);

// > Array ["최우식👍", "박보영👍", "이준영👍", "전소니👍", "김재욱👍"]

// ------------------------------------------------------------------

const updatedNames = actorNameArray.map((name) => {

return name + "👍"; // ブロック構文を使う場合はreturnが必要

});

console.log(updatedNames);

// > Array ["최우식👍", "박보영👍", "이준영👍", "전소니👍", "김재욱👍"]

配列のそれぞれの名前の後ろに「👍」がつけられたものを返り値として、新しい配列を作れました。

forEach

const actorNameArray = ["최우식", "박보영", "이준영", "전소니", "김재욱"];

const updatedNames = actorNameArray.forEach((name) => {
  return name + "👍";
})

console.log(updatedNames);

// > undefined

const actorNameArray = ["최우식", "박보영", "이준영", "전소니", "김재욱"];

const updatedNames = actorNameArray.forEach((name) => {

return name + "👍";

})

console.log(updatedNames);

// > undefined

forEachでは返り値を使えないため、returnを書いても、undefinedが出力されます。

filter

MDN Web Docsには下記のように書かれています。

「filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。」

mapやforEachと決定的に異なるのは「テストに合格した要素だけを抽出」という部分です。

filterの使用例

const charactorNameArray = ["고겸", "김무비", "홍시준", "손주아", "고준"];

const result = charactorNameArray.filter((name) => {
    return name.includes("고");
});

console.log(result)

// > Array ["고겸", "고준"]