Javascriptのmapとreduceの動きが
ややこしいので、動きだけをまとめる
map()
mapは配列から中身を１つずつ取り出して、処理を行う。
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。(MDN Web docsより)
map.js
const array = [1, 3, 5, 7, 9];
const fn = array.map(function (value) {
return value + 1;
});
結果
>>[2,4,6,8,10]
なにが起きているか？
- 配列から"1"が取り出される
- functionの引数"value"に値が渡される
- value + 1が実施される（初回では1 + 1)
- 結果が返される (return)
- 結果の配列に格納される (この時点で[2])
- 配列の次の値がfunctionの引数"value"に渡される
- value + 1が実施される（この時点では3 + 1)
- 結果が返される (return)
- 結果の配列に格納される (この時点で[2, 4])
以降配列の値分だけ繰り返される...
メモ
上記コードのfunctionは所謂コールバック関数である。
「return」を書かないと、どうなるか？
map.js
const array = [1, 3, 5, 7, 9];
const fn = array.map(function (value) {
value + 1;
});
結果
>>[undefined, undefined, undefined, undefined, undefined]
戻り値がないため、各配列の結果がundefined(値が未定義)となる。
追記
コメントで教えていただきました、アロー関数を使用することで、returnがなくても返ってくる
map.js
onst array = [1, 3, 5, 7, 9];
const mapped = array.map(value => value + 1);
console.log(mapped);
結果
>>[2,4,6,8,10]
各配列に対して共通の処理をした結果を配列に格納して返してくれる。
その後の処理で処理後の配列の値を使いたいときに使うと便利。
forEachという非常に似たものもあるが、こちらは戻り値がないため、
各配列の値に処理をした結果をその後の処理で使えない。
forEach.js
const array = [1, 3, 5];
const fn1 = array.forEach(function (value) {
return value + 1;
});
結果
>>undefined
reduce()
reduceとは、、、？
reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。(MDN Web docsより)
いまいちわからんのでコードを確認する。
reduce.js
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const fn = array.reduce(function (sumValue, value) {
return sumValue + value;
});
結果
>>55
なにが起きているか？
- 配列から1番目の値がsumValue, 2番目の値がvalueに渡される
（今回の場合、sumValueは1、valueは2) - sumValue + value (1 + 2)が行われる
- 結果が返る
- 結果はsumValueに代入される
- ３番目の値がvalueに渡される
- sumValue(3) + value(3) が行われる
- 結果が返る
- 結果はsumValueに代入される
- 以降配列の値がすべて処理されるまで繰り返し
- 最終的にすべてが足されたsumValueが結果として返される
リファレンスを確認してみると、indexだとか、引数は4つだとかあるが、
とりあえず動きを理解したいだけなので、ここまでとする。
メモ
こちらも同様「return」がないとどうなるか？
reduce.js
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const fn = array.reduce(function (sumValue, value) {
sumValue + value;
});
結果
>>undefined
追記
こちらもアロー関数を使用して書けば返ってくる
reduce.js
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const fn = array.reduce((sumValue, value) => sumValue + value);
console.log(fn);
結果
>>55
ほんとうは
もっと詳細に理解する必要があると思うが、とりあえずなにが起きてるん？を
理解するためにまとめてみた。