Reducing can also be applied for arrays of objects. It does get complicated because you have to keep track of several variables and those variables all can have different data types. The current will now be an object.

Remember, reducing takes an entire array and makes it a single value.

const grades = [10, 15, 5];

const sum = grades.reduce((total, current) => { 
    return total + current
}, 0);

So what do we do to reduce this?

const grades = [{grade: 10}, {grade: 15}, {grade: 5}];

This example is very similar to the one above, except that grades is now an array of objects instead of an array of numbers.

This means that the current variable will be an object instead of a number. Thus, we'll have to extract the grade out of it by writing current.grade. This can be visualized by adding a console.log(current) inside the .reduce() callback.

We can do this:

const sum = grades.reduce((total, current) => {
    return total + current.grade;
}, 0);

Another example

The socialImpact variable calculated the sum of stats.likes and stats.retweets for every tweet.

const tweets = [
    {
        id: 10512,
        stats: {
            likes: 41,
            retweets: 54
        }
    },
    {
        id: 41241,
        stats: {
            likes: 14,
            retweets: 20
        }
    }
];

const socialImpact = tweets.reduce((total, current) => {
    console.log(current); // you can also call it tweet. Visualize the object
    return total + current.stats.likes + current.stats.retweets;
}, 0); //don't forget to set your starting value for total :) 0 for sum, 1 for multiplication
console.log(socialImpact); // 129 - notice this doesn't add up the id's :)

Quick Recap

Arrays of objects can be reduced into a single value (most commonly a number).
The main difference is that current becomes an object. So make sure to log it to the console to visualize it.
The 2nd argument of the reduce is the starting value for the total parameter.
The starting value for a sum is 0.
The starting value for a product (multiplication) is 1.

Sum Message Count Try it

Complete the sumMessageCount function such that it returns the sum of the messageCount in every group using the reduce() method.

// lets build this in steps
// Start with the basic function declaration
const sumMessageCount = groups => {

}

// build in the reduce statement
const sumMessageCount = groups => {
    const messageCount = groups.reduce((total, current) => {

    },0); //we are doing sum
}

//
const sumMessageCount = groups => {
    const messageCount = groups.reduce((total, current) => {
        console.log(current); // add in this to visualize what the current objects are.
        console.log(current.details.messageCount);// see that we need to grab the message counts

    },0); //we are doing sum
}

const sumMessageCount = groups => {
    const messageCount = groups.reduce((total, current) => {
        console.log(current.details.messageCount);
        return total + current.details.messageCount; //Return the total

    },0); //we are doing sum
    return messageCount //make sure we are returning messageCount
}

//OR
const sumMessageCount = groups => {
    const messageCount = groups.reduce((total, current) => {
        console.log(current.details.messageCount);
        console.log(`Total is ${total}`);
        return total + current.details.messageCount;

    },0); //we are doing sum
    return messageCount
}

Another cart example:

const getCartTotal = products => {
    const cartPrice = products.reduce((total,current) => {
        console.log(total + current.price * current.quantity) //visibility
        return total + (current.price * current.quantity)
    },0);
    return cartPrice
}

// Sample usage - do not modify
const sampleProducts = [{
    price: 10,
    quantity: 3
}, {
    price: 5,
    quantity: 4
}]
console.log(getCartTotal(sampleProducts)); // 50

A little multiplication reduce

const getProduct = recordings => {
    const product = recordings.reduce((total,current) => {
        return total * current.value
    },1);
    return product;
}

// Sample usage - do not modify
const sampleRecordings = [{
    value: 2,
}, {
    value: 5
}];
console.log(getProduct(sampleRecordings)); // 10

Chapter Recap

Arrays of objects can be reduced into a single value (most commonly a number).
The main difference is that current becomes an object. So, make sure to log it to the console to visualize it.
The 2nd argument of the reduce method is the starting value for the total parameter.
The starting value for a sum is 0.
The starting value for a product (multiplication) is 1.

Quick Recap

Sum Message Count Try it​

Another cart example:

A little multiplication reduce

Chapter Recap

Sum Message Count Try it