Data Aggregation Using Maps in JavaScript

Welcome! The focus of today's lesson is on data aggregation, a practical concept utilizing Maps as our primary tool in JavaScript.

Data aggregation refers to gathering "raw" data and subsequently presenting it in an analysis-friendly format. An illustrative analogy is viewing a cityscape from an airplane, which provides an informative aerial overview rather than delving into the specifics of individual buildings. We will introduce you to the Sum, Average, Count, Maximum, and Minimum functions for practical, hands-on experience.

Let's continue!

We will begin with a hands-on example using a fruit basket represented as a Map. First, create a new Map and set the quantities of various fruits:

const fruitBasket = new Map();
fruitBasket.set('apples', 5);
fruitBasket.set('bananas', 4);
fruitBasket.set('oranges', 8);

Next, sum the values in the Map. Start with a variable to hold the total number of fruits:

let totalFruits = 0;
for (let value of fruitBasket.values()) {
    totalFruits += value; // Add each fruit quantity to the total
}

Finally, print the total:

console.log(`The total number of fruits in the basket is: ${totalFruits}`);
// It outputs: "The total number of fruits in the basket is: 17"

Counting the number of fruit types in our basket corresponds to counting the number of keys in our Map. Start by creating the Map again:

const fruitBasket = new Map();
fruitBasket.set('apples', 5);
fruitBasket.set('bananas', 4);
fruitBasket.set('oranges', 8);

Then, count the elements using the size property:

const countFruits = fruitBasket.size; // Number of keys in the Map
console.log(`The number of fruit types in the basket is: ${countFruits}`);
// It outputs: "The number of fruit types in the basket is: 3"

The spread operator (...) in JavaScript allows an iterable such as an array, string, or Map to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. It is useful for tasks such as copying or merging arrays, passing a variable number of arguments to functions, and working with Maps.

For instance, consider our fruit basket Map from earlier. You can use the spread operator to convert the Map's values into an array:

const fruitQuantities = [...fruitBasket.values()];
console.log(fruitQuantities);
// It outputs: [5, 4, 8]

Similarly, you can convert the keys into an array:

const fruitTypes = [...fruitBasket.keys()];
console.log(fruitTypes);
// It outputs: ['apples', 'bananas', 'oranges']

By leveraging the spread operator, you can seamlessly integrate Map elements into various operations that expect arrays or argument lists. This flexibility makes the spread operator a highly valuable tool when working with Maps for data aggregation.