JavaScriptで配列内のオブジェクトを反復処理し、プロパティの合計値を求める方法

JavaScriptでは、オブジェクトが格納された配列から特定のプロパティの合計を求めたい場面がよくあります。例えば、次のようなオブジェクトの配列があるとします。

const arr = [
  {
    duration: 10,
    any: 'fields'
  }, {
    duration: 20,
    any: 'other fields'
  }, {
    duration: 15,
    any: 'some other fields'
  }
];

このような配列を受け取り、各オブジェクトが持つ duration プロパティの値をすべて足し合わせた結果を返すJavaScript関数を作成してみましょう。

上記の配列の場合、10 + 20 + 15 の計算結果である 45 が出力されれば正しく動作しています。

実装例：forループを使う方法

最も基本的なアプローチは、for ループで配列を反復処理しながら、各要素の duration プロパティの値を累積していく方法です。

const arr = [
  {
    duration: 10,
    any: 'fields'
  }, {
    duration: 20,
    any: 'other fields'
  }, {
    duration: 15,
    any: 'some other fields'
  }
];
const addDuration = arr => {
  let res = 0;
  for(let i = 0; i < arr.length; i++){
    res += arr[i].duration;
  };
  return res;
};
console.log(addDuration(arr));

出力結果

コンソールには次のように表示されます。

45

よりモダンな書き方：reduce()メソッドを使う

Array.prototype.reduce() を使うと、同じ処理をより簡潔に記述できます。

const sumDuration = arr =>
  arr.reduce((total, obj) => total + obj.duration, 0);

console.log(sumDuration(arr)); // 45

reduce() は初期値（ここでは 0）から始めて、各要素に対してコールバック関数を実行し、累積した値を返します。ループ変数や一時変数が不要になるため、コードの意図も伝わりやすくなります。

どちらの方法でも結果は同じですが、配列の集計処理を行う場合は可読性の高い reduce() を採用するのが一般的です。状況に応じて使い分けてください。