map()メソッドについて【備忘録】

こんにちは！
今回も、開発で、map()メソッドを使う機会があったので、備忘録としてまとめて行きます！

map()メソッドって...?

map()

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

配列の各要素をコールバック関数で処理して、関数の戻り値から新しい配列を作って返す。 出典)柳井政和著 『JavaScript[完全]入門』(2021)p.227

コールバック関数とは、関数の引数として渡される関数のことです。関数の引数には、文字列や数値などのように、「値」を取りますが、関数を引数に取ることも可能なのです。

今回のmap()メソッドは、引数として渡された関数で行われた処理の結果から、新しい配列を作るメソッドなのです！

map()メソッドの使用例

map()メソッドの使用例は、以下です。

const array = [2, 4, 6, 8];

const arr = array.map(ary => ary*2);

console.log(arr);
/* 実行結果
[4, 8, 12, 16]
*/

上記のコードを元に、ちょこっと解説してみます！

最初に配列を用意します。上の例では、配列arrayを用意し、4つの要素を格納しています。

ここで、例えば、配列の要素を全て2倍にしたいと思ったとします。map()メソッドの登場です。
map()の引数として、関数が渡されていますね？(コールバック関数)
その関数の中で、ary*2と言う処理が行われています。
この処理は、最初に作った配列arrayの要素全てに対して行われます。

このコールバック関数での処理の結果を戻り値として、これらを使って、新しい配列が作られます。

まとめ

map()メソッドとは、引数に渡した関数で元の配列の要素それぞれに対して処理を行い、その処理結果から新たな配列を作り出すメソッドでした！

お読み頂きありがとうございました！
もし、間違いや補足などございましたら、コメント頂けますと助かります！

参考資料

MDN Array.prototype.map()

柳井政和著 『JavaScript[完全]入門』(2021)