リスト内の同じkey同士のvalueの合計

Question

前提・実現したいこと

javascriptで以下のことを実行したいです。
const array = [
{ foo: 1 },
{ bar: 2 },
{ foo: -2, },
{ foo: 3, bar: 4 },
];

{foo:2,bar:6}
同じkeyのvalueの合計を出力したいです

発生している問題・エラーメッセージ

[ 1, undefined, -2, 3 ]
[ undefined, 2, undefined, 4 ]

該当のソースコード

import _ from 'lodash'
const array = [
    { foo: 1 },
    { bar: 2 },
    { foo: -2, },
    { foo: 3, bar: 4 },
];

const foo = array.map(obj => obj.foo)
const bar = array.map(obj => obj.bar);
_.without(bar,undefined)
_.without(foo,undefined)
console.log(foo)
console.log(bar)

試したこと

またlodashを導入して
compactやrejerectなどを使用しましたがundefinedが出力されてしまいます。

Answer 1

配列の値を順に処理したい時はreduceを使うとよいと思います。
動作デモ

const array = [
  { foo: 1 },
  { bar: 2 },
  { foo: -2 },
  { foo: 3, bar: 4 }
]

// reduce内のコールバック関数の第1引数は現在の値、つまり一巡目はreduceの第二引数である初期値の0
// それにコールバック関数の第2引数である現在処理している値からfooを取り出して足していく
// ただしarray内のオブジェクトにはfooがundefinedの場合があるので{ foo = 0 }として無かった場合のデフォルト値を設定している
const foo = array.reduce((acc, { foo = 0 }) => acc + foo, 0)
const bar = array.reduce((acc, { bar = 0 }) => acc + bar, 0)

console.log(foo)
console.log(bar)

Comments

[fofine]

ご回答いただきありがとうございます。
無事解決できました！！

Answer 2

mapは変換で1:1な処理を行うには向いていますが、今回はN:1のような集計っぽい処理なのでreduceを使うとよいです。

その前に、手続き的にやるとどう書けるかを考えてみましょう。
arrayに入っているのはobjectで今回はobjectの各キー(foo,bar等)毎に取り出し、合算したい集計したい、という事をやりたいのだと思います

// const array = [{}, ...省略]
const result = {};
for(const entry of array){
  for(const [k,v] of Object.entries(entry)){
    if(result[k] !== undefined){
       result[k] = result[k] + v;
    }else{
       result[k] = v;
    }
  }
}

これをmapやreduceでやるとなると、こんな感じでしょうか（もう少しうまいやり方はあるかとは思います。。）

const result2 = array.flatMap( v => Object.entries(v) ).reduce( (p, [k,v]) => {
  p[k] = p[k] !== undefined ? p[k] + v : v;
  return p;
}, {})

最近のJavaScriptはmap,reduce,flatMapなどの配列を操作するメソッドが揃っているのでlodash無しでもできるかと思います。