Js 配列の総和を求めるコードが理解できない

Question

前提・実現したいこと

Js初心者のものです。
foreachメソッドを利用した、配列の総和を求めるコードが理解できません。

変数arrの配列の総和を求めるコードですが、理解できない点がいくつかあります。

2行目のvar sum = 0;　というコードはなぜ必要なのでしょうか。
また、コード中のelmという引数は、代入されることもなく、どのような働きをしているのかが理解できません。
加えて、4行目のsum += elm　が、sum = sum + elm　であることはわかりますが、これは何を言い表しているのでしょうか。
※for文を使用した方法は理解しています。別解を調べて疑問に思いました。

var sum  = function(arr) {
    var sum = 0;
    arr.forEach(function(elm) {
        sum += elm;
    });
    return sum;
};

var arr = [1, 2, 3, 4, 5];
console.log( sum(arr) ); // 15

elm自体が特別な引数ではなく、aでもbでも結果が同じであることは確認しました。

Comments

[yasutomi]

コードが見づらいので
コードブロックの使用をお願いします。

[shin_okura]

見やすいやり方を教えてくださりありがとうございます

Answer 1

2行目のvar sum = 0;　というコードはなぜ必要なのでしょうか。

sumに数が入っていないと計算できないからです。
□ + 1は計算できないですが0 + 1は計算できますよね。

コード中のelmという引数は、代入されることもなく

[1, 2, 3, 4, 5]が左から順番にelmに代入されています。

4行目のsum += elm　が、sum = sum + elm

sum += elm は 0 + 1 = 1 1 + 2 = 3 3 + 3 = 6 6 + 4 = 10 10 + 5 = 15となり、(一番左の数値がsum)
sum = sum + elm は結果をsumに代入するので右辺の
0 + 1 1 + 2 3 + 3 6 + 4 10 + 5をsumに入れるのでsum += elmと
同じ結果になると考えるとわかりやすいです。

Comments

[shin_okura]

具体的な数字を使ってわかりやすく説明してくださりありがとうございます
初心者でもイメージがつかめました。elmは、foreachでの処理の際に、
配列の値が順番に代入されるということですね。

Answer 2

2行目のvar sum = 0;　というコードはなぜ必要なのでしょうか。

合計を出すための初期値です。何も代入しないままだとundefinedという値となって、そこに数値を足してもNaNという値となり、結果が得られません。

コード中のelmという引数は、代入されることもなく

.forEachは、「関数の要素1つ1つに対して、それを引数とした関数を呼び出す」メソッドです。elmへの代入はforEachが行っています。

4行目のsum += elm　が、sum = sum + elm　であることはわかりますが、これは何を言い表している

のでしょうか。

要素1つごとにコールバックが実行されますので、1つずつ足しこんでいきます。

Array​.prototype​.for​Each() - MDN

---

なお、このような「配列の中身から1つの結果を返す」ような場合、Array.prototype.reduceというメソッドも使えます。

sum = arr.reduce(function(total, elem){
  return total + elem;
}, 0);

Comments

[shin_okura]

一見してわからないと思いましたが、foreachメソッドの「関数の要素1つ1つに対して、それを引数とした関数を呼び出す」という説明で非常にしっくりきました。本質をつく回答をありがとうございました。