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:
JavaScript1const 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:
JavaScript1let totalFruits = 0; 2for (let value of fruitBasket.values()) { 3 totalFruits += value; // Add each fruit quantity to the total 4}
Finally, print the total:
JavaScript1console.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:
JavaScript1const fruitBasket = new Map(); 2fruitBasket.set('apples', 5); 3fruitBasket.set('bananas', 4); 4fruitBasket.set('oranges', 8);
Then, count the elements using the size
property:
JavaScript1const 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:
JavaScript1const fruitQuantities = [...fruitBasket.values()]; 2console.log(fruitQuantities); 3// It outputs: [5, 4, 8]
Similarly, you can convert the keys into an array:
JavaScript1const 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:
JavaScript1const 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
:
JavaScript1const 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:
JavaScript1let 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:
JavaScript1const 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!