Lesson 3

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:

JavaScript`1const fruitBasket = new Map(); 2fruitBasket.set('apples', 5); 3fruitBasket.set('bananas', 4); 4fruitBasket.set('oranges', 8);`

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

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

Finally, print the total:

JavaScript`1console.log(`The total number of fruits in the basket is: ${totalFruits}`); 2// 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:

JavaScript`1const fruitBasket = new Map(); 2fruitBasket.set('apples', 5); 3fruitBasket.set('bananas', 4); 4fruitBasket.set('oranges', 8);`

Then, count the elements using the `size`

property:

JavaScript`1const countFruits = fruitBasket.size; // Number of keys in the Map 2console.log(`The number of fruit types in the basket is: ${countFruits}`); 3// 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:

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

Similarly, you can convert the keys into an array:

JavaScript`1const fruitTypes = [...fruitBasket.keys()]; 2console.log(fruitTypes); 3// 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.

One directly applicable use case of the spread operator is finding the highest and lowest values in a Map. JavaScript has two built-in functions, `Math.max`

and `Math.min`

, which both take the elements directly as parameters. For example, to find the maximum value in the array `let arr = [1, 2, 3, 4, 5];`

, you would call `Math.max(1, 2, 3, 4, 5);`

, rather than `Math.max(arr);`

. This is where the spread operator comes in handy, as this is exactly what it does:

JavaScript`1const maxFruit = Math.max(...fruitBasket.values()); 2console.log(`The highest quantity of fruits is: ${maxFruit}`); 3// It outputs: "The highest quantity of fruits is: 8"`

Similarly, you can find the minimum value using `Math.min`

:

JavaScript`1const minFruit = Math.min(...fruitBasket.values()); 2console.log(`The lowest quantity of fruits is: ${minFruit}`); 3// It outputs: "The lowest quantity of fruits is: 4"`

To calculate the average number of each type of fruit, first sum the values, as demonstrated previously:

JavaScript`1let totalFruits = 0; 2for (let value of fruitBasket.values()) { 3 totalFruits += value; 4}`

Then, calculate the average by dividing the total quantity of fruits by the number of fruit types:

JavaScript`1const averageFruits = totalFruits / fruitBasket.size; 2console.log(`The average number of each type of fruit in the basket is: ${averageFruits.toFixed(2)}`); 3// It outputs: "The average number of each type of fruit in the basket is: 5.67"`

Congratulations on learning about data aggregation! You have mastered the Sum, Count, Max, Min, and Average operations, as well as the spread operator, thus enhancing your knowledge base for real-world applications. The skills you have acquired in data aggregation using Map are invaluable across a vast array of data analysis tasks, such as report generation and decision-making processes. Happy coding!