JSFiddle - React, Tailwind, and code Playground

JavaScript

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

// reduce内のコールバック関数の第一引数は現在の値、つまり一巡目はreduceの第二引数である初期値の0
// それにfoo（またはbar）を取り出して足していく、ただし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)