jsのforEachとmapの違い

forEach と map は両方とも配列を走査するための JavaScript メソッドですが、実行する処理が異なります。

forEach メソッドは、配列内の各要素を反復処理し、各要素に対してコールバック関数を実行するために使用されます。このコールバック関数は、現在の要素の値、現在の要素のインデックス、配列全体の 3 つのパラメータを受け入れることができます。forEach メソッドは値を返しません。各要素のコールバック関数を実行するだけです。

map メソッドは配列内の各要素を走査するためにも使用されますが、元の配列内の各要素に対してコールバック関数を実行した後、戻り値を含む新しい配列が返されます。このコールバック関数は、現在の要素の値、現在の要素のインデックス、配列全体の 3 つのパラメータも受け入れることができます。

したがって、forEach と map の主な違いは戻り値です。forEach は値を返しませんが、map は新しい配列を返します。両者の違いをわかりやすく説明する例を次に示します。

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach 方法
numbers.forEach((number) => {
  console.log(number * 2);
});

// 使用 map 方法
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers);

上記のコードでは、まず数値を含む配列を定義します。次に、forEach メソッドを使用して配列内の各要素を反復し、各要素に対してコールバック関数を実行します。このコールバック関数は各要素を 2 で乗算し、結果をコンソールに出力します。forEach メソッドは値を返さないため、このメソッドを使用して新しい配列を作成することはできません。

次に、map メソッドを使用して配列内の各要素を反復し、各要素に対してコールバック関数を実行します。このコールバック関数は各要素を 2 で乗算し、結果を返します。Map メソッドは新しい配列を返すため、その結果を変数に保存してコンソールに出力できます。

したがって、forEach と map の主な違いは戻り値です。forEach は値を返しませんが、map は新しい配列を返します。

おすすめ