配列のすべての要素の値を合計した値を取得する

配列に含まれるすべての要素の値を順番に加算していき、最終的に合計値を取得することができます。ここでは JavaScript で配列のすべての要素の値を合計した値を取得する方法について解説します。

(Last modified: 2023年02月03日)

要素の値を合計する(reduceメソッド)

Array オブジェクトの reduce メソッドを使うと、配列に含まれるすべての要素の値を合計し、その合計値を返します。書式は次の通りです。

reduce メソッドは配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。コールバック関数は、合計値の保管用、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。コールバック関数の中では合計値の保管用の値に現在の要素の値を加算したものを戻り値として返します。最終的に reduce メソッドはすべての要素の合計を行った値を戻り値として返します。

初期値は省略することができますが、省略した場合は配列の最初の要素の値が初期値として使用されます。配列の要素に数値のみが入っているだけであればどちらでも同じですが、そうでない場合は初期値(例えば 0 )を指定しておくことをおすすめします。

次のサンプルをみてください。

let result = [48, 75, 92, 61, 54, 83, 76];
let total = result.reduce(function(sum, element){
  return sum + element;
}, 0);

console.log(total);
>> 489

初期値として 0 を指定しているので変数 sum には最初 0 が格納されます。その後、コールバック関数をすべての要素に対して順に呼び出し、コールバック関数は変数 sum に要素の値を加算して戻り値として返します。返された値は sum に格納されます。そして次の要素に対してコールバック関数が呼び出されます。最後に reduce メソッドの戻り値としてすべての要素の値を合計した値が返されます。

なおコールバック関数はアロー関数式を使って次のように記述することもできます。(アロー関数式については「アロー関数式を使って関数を定義する」を参照されてください)。

let result = [48, 75, 92, 61, 54, 83, 76];
let total = result.reduce((sum, element) => sum + element, 0);

console.log(total);
>> 489

もう一つサンプルをみてください。今度は配列の要素に Object オブジェクトが格納されている場合です。

let user = [
  { name:'Yamada', result:75 },
  { name:'Suzuki', result:91 },
  { name:'Kudou', result:80 }
];

let total = user.reduce(function(sum, element){
  return sum + element.result;
}, 0);

console.log(total);
>> 246

このようなケースでは初期値を指定していないと、初期値として最初の要素の値である Object オブジェクトがそのまま格納されてしまうため意図した結果にはなりませんのでご注意ください。

-- --

JavaScript で配列のすべての要素の値を合計した値を取得する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。