JavaScriptでforEachを使用して配列の要素を足し算し、変数に入れて使いたいが理想とした結果が出ません、、

Question

let arr = [1, 2, 3, 4];
let sum = 0;
let arr2 = arr.forEach((n) => {
  return (sum += n);
});
console.log(arr2);
僕の期待する結果は
// 11ですが
// undefinedで帰ってきます、、、
僕の頭の中は
　　　　　　　　　　　↓に1,2,3,4と1つずつ呼び出され
let arr2 = arr.forEach((n) => {
  return (sum += n);
↑
ここで
sum += n
(0 += 0 + 1 )
(1 += 1 + 1 )
(2 += 1 + 2 )
});
のイメージですが何が違うのでしょうか？？
すみませんお願いいたしますm(_ _)m

Comments

[hoshi-takanori]

やりたいことは reduce でできるかも。
let sum = arr.reduce((a, n) => a + n, 0);

[hideo]

気づいてなくてすみません＞＜
回答ありがとうございますm(_ _)m

Answer 1

一般に加算を繰り返して結果をえる場合reduceなどを利用しますね

let arr = [1, 2, 3, 4];
let sum1 = 0;
arr.forEach(x=>sum1+=x);
console.log(sum1);
let sum2 = arr.reduce((x,y)=>x+y);
console.log(sum2);

Answer 2

MDN で forEach の説明をみると

返値

undefined です。

とあります。なので質問にあるような let arr2 = arr.forEach(･･･ というように、forEach(･･･) の返す値を変数に入れるコードを書くことはまず無いです。

ちなみに配列のメソッドで引数にコールバックを取るものは forEach の他にもありますが、reduceを使うと、以下のようにメソッドの返す値が配列要素の合計になるように書けます。

const arr = [1, 2, 3, 4];
const sum = arr.reduce((s, e) => s + e);

console.log(sum); // =>10

Comments

[hideo]

ご丁寧にありがとうございます！
上記の書き方調べてみます><
ありがとうございますm(_ _)m

Answer 3

僕の期待する結果は
// 11ですが
// undefinedで帰ってきます、、、

下記コードでは合計値は「10」と出力されます。

const arr = [1, 2, 3, 4];
let sum = 0;

arr.forEach(n => sum += n);

console.log(sum);
# 10

Comments

[hideo]

ごめんなさいそもそも計算ミスしてますね、、、

Answer 4

足されている変数は「sum」であるため、sumをconsole.logで出力すれば期待されている動作になるのではないでしょうか！
また、forEachは返り値がないという性質を持っているため、代入しているarr2はundefinedになるのだと思います！

Comments

[raratyurara]

ですので、現在
return (sum += n);
と記述されておりますが、forEachのみで実装するのであれば
sum += n;
のみで実現できるかと思います！

[hideo]

ご丁寧な回答ありがとうございますm(_ _)m
変数に代入して実現するにはforEachは使えない認識で大丈夫でしょうか？><

[raratyurara]

ありがとうございます！
そうですね！
forEachでは変数に代入できないという認識でお間違いないです！

また、変数に代入したいのであれば、forEachより少し複雑ですが「reduce」というメソッドを使うことがおすすめです！
（reduceを使えば

sum = arr.reduce(~~~~~)

といった形でスマートに記述できます！）

[hideo]

ご丁寧にありがとうございます><

使い方調べてみますねm(_ _)m