[javascript入門] 配列処理でよく使うmapとforEachの違い


はじめに

javascriptでよく利用する配列処理ですが、mapとforEachの違いをそこまで理解せずに利用している方も多いかと思います。

どちらのメソッドもES5で導入された関数となります。

今回は、このmapメソッドとforEachメソッドの違いについてまとめておきたいと思います。

forEach()

forEachは配列のすべての要素に対してコールバック関数の処理を行います。単純にループ内で処理するのみなので、返り値が「undefined」となります。

let numberArr = [1, 2, 3, 4, 5, 6];
let returnVal = numberArr.forEach((num) => console.log("forEach:" + num * num));
console.log("Result:" + returnVal);

//Console: forEach:1
//Console: forEach:4
//Console: forEach:9
//Console: forEach:16
//Console: forEach:25
//Console: forEach:36
//Console: Result:undefined

map()

mapはforEachと基本的に同じでーるバック関数の処理を行います。しかし、mapの場合は常に新しい配列を返すので返り値を配列として取得することができます。

let numberArr = [1, 2, 3, 4, 5, 6];
let returnVal = numberArr.map((num) => num * num);
console.log("Result:" + returnVal);

//Console: Result:1,4,9,16,25,36

まとめ

両方のメソッドを簡単に下記にまとめました。

forEachmap
返り値:「undefined」返り値:新しく作成された配列
新しい配列は作成されないので元の配列を操作する必要がある元の配列は変更されず、新しい配列を操作することが可能

上記から、配列要素をループさせて処理する場合はforEachを利用し、新しい配列を利用して別の処理を行いたい場合はmapを利用する。といったように用途に合わせて利用しましょう。