【JavaScript】map()の使い方

map()の使い方

map()は、配列すべての要素に対して、コールバック関数を実行してその返り値で新しい配列が生成される。map()の基本的な書き方は以下となる。

// arrayは配列
array.map((value, index, array) => {
    //　処理内容
});

上記のようにコールバック関数は以下の3つの引数を取る。ただし、indexとarrayについては省略可能。
■ value : 配列の要素
■ index : 配列のインデックス
■ array : 処理対象の配列

map()を使って配列の要素を2乗するだけの簡単なサンプルが以下となる。

const array = [1, 7, 12, 15];
const result = array.map((value) => {
	return value * value;
});

console.log(result);    // [ 1, 49, 144, 225 ]

forEach()とmap()の違い

forEach()とmap()の違いは、実行結果を新しい配列として返すかどうか。
map()は、コールバック関数の返り値で新しい配列が生成される一方で、forEach()は単純に処理を実行するだけで返り値がないため、returnを記述してもforEach()の結果はundefinedが返される。
MDN Web Docsには、map()を使用すべきではない場合として2点挙げられていた。(参考: MDN Web Docs)
● 返された配列を使用しない場合
● コールバックから値を返さない場合