【JavaScript】複数のオブジェクトの同名プロパティの値を合計する方法

JavaScriptでは、複数のオブジェクトにまたがる同じキー（プロパティ）の値を1つにまとめて合計したいケースがあります。

例えば、次のような2つのオブジェクトがあるとします。

const obj1 = {
    a:12, b:8, c:17
};
const obj2 = {
    a:2, b:4, c:1
};

ここで求められるのは、このようなオブジェクトを引数として受け取り、同一のプロパティ名を持つ値どうしを合計して1つのプロパティにまとめるJavaScript関数です。

処理後の出力オブジェクトは、次のようになります。

const output = {
    a:14, b:12, c:18
};

※ ここでは説明をシンプルにするために2つのオブジェクトのみを扱っていますが、実際には任意の個数のオブジェクトに対応できる関数として実装する必要があります。

実装例：sumObjectsByKey関数

可変長引数（スプレッド構文 ...objs）と配列の reduce() メソッドを組み合わせることで、いくつでもオブジェクトを受け取れる汎用的な関数を実現できます。

const obj1 = {
    a:12,
    b:8,
    c:17
};
const obj2 = {
    a:2,
    b:4,
    c:1
};
const sumObjectsByKey = (...objs) => {
    const res = objs.reduce((a, b) => {
        for (let k in b) {
            if (b.hasOwnProperty(k))
            a[k] = (a[k] || 0) + b[k];
        }
        return a;
    }, {});
    return res;
}
console.log(sumObjectsByKey(obj1, obj2));

コードのポイント

• ...objs：可変長引数により、渡されたすべてのオブジェクトを配列として受け取ります。
• reduce()：初期値として空オブジェクト {} を用意し、各オブジェクトを順番に集約していきます。
• a[k] || 0：まだキーが存在しない場合は0から加算を始めるため、最初のオブジェクトでも正しく動作します。
• hasOwnProperty(k)：継承されたプロパティではなく、オブジェクト自身が持つプロパティだけを対象にします。

出力結果

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

{ a: 14, b: 12, c: 18 }

この手法を使えば、3つ以上のオブジェクトに対しても sumObjectsByKey(obj1, obj2, obj3, ...) のようにそのまま適用でき、売上データの集計やアンケート回答数の合算など、さまざまな場面で活用できます。