JavaScript reduce not working on an object

Question

I am trying to understand how reduce works

var expense = [
    {
        item: "Bed",
        cost: 1499,
        date: "02-23-2018"
    },
    {
        item: "Phone",
        cost: 2499,
        date: "02-23-2018"
    },
    {
        item: "Book",
        cost: 400,
        date: "02-23-2018"
    },
    {
        item: "Mattress",
        cost: 700,
        date: "02-23-2018"
    },
    {
        item: "Food",
        cost: 300,
        date: "02-23-2018"
    }
];

var totalExpense = expense.reduce(function (a, b) {
    console.log(a.cost, b.cost);
    return a.cost + b.cost;
});

console.log(totalExpense);

this gives totalExpense as NaN.

Output:

1499 2499
undefined 400
undefined 700
undefined 300
NaN

When I perform the same operation with a simple expense array, it works fine.

Solution

The first parameter you pass to reduce's callback is the previous value (a) - or the second argument you pass to reduce (the initial value)

[].reduce(function(a, b) { ... }, 0);
          ^ callback              ^ initial value

a will hold the result of each previous iteration, So to get the total of all costs, simply add b.cost

var expense = [{
    item: 'Bed',
    cost: 1499,
    date: '02-23-2018'
  },
  {
    item: 'Phone',
    cost: 2499,
    date: '02-23-2018'
  },
  {
    item: 'Book',
    cost: 400,
    date: '02-23-2018'
  },
  {
    item: 'Mattress',
    cost: 700,
    date: '02-23-2018'
  },
  {
    item: 'Food',
    cost: 300,
    date: '02-23-2018'
  }
];
var totalExpense = expense.reduce(function(a, b) {
  return a + b.cost;
}, 0);

console.log(totalExpense);

Using es6 syntax you could make it a one liner

var totalExpense = expense.reduce((a, {cost}) => a + cost, 0);