Welcome to today's lesson! Our topic for the day is data aggregation, a crucial aspect of data analysis. Like summarizing a massive book into key points, data aggregation summarizes large amounts of data into important highlights.
By the end of this lesson, you'll be equipped with several aggregation methods to summarize data streams in JavaScript. Let's get started!
Let's say we have an array of numbers denoting the ages of a group of people:
JavaScript1const ages = [21, 23, 20, 25, 22, 27, 24, 22, 25, 22, 23, 22];
Common questions we might ask are: How many people are in the group? What's their total age? Who's the youngest and the oldest? JavaScript's handy built-in properties and functions like length
, reduce
, Math.min
, and Math.max
have our answers:
JavaScript1const numPeople = ages.length; // Number of people (12) 2const totalAges = ages.reduce((a, b) => a + b, 0); // Total age (276) 3const youngestAge = Math.min(...ages); // Youngest age (20) 4const oldestAge = Math.max(...ages); // Oldest age (27) 5 6// Use reduce and length to find the average age 7const averageAge = ages.reduce((a, b) => a + b, 0) / ages.length; // Result: 23 8 9// Use Math.max() and Math.min() to find the range of ages 10const ageRange = Math.max(...ages) - Math.min(...ages); // Result: 7
These functions provide essential aggregation operations and are widely used with data streams.
For deeper analysis, such as calculating the average age or range of ages, we resort to for
and while
loops.
For example, using for
loops, we can also find the mode or most frequent age:
JavaScript1const ages = [21, 23, 20, 25, 22, 27, 24, 22, 25, 22, 23, 22]; 2 3// Initialize an object to store the frequency of each age 4const frequencies = {}; 5 6// Use a for loop to populate frequencies 7for (const age of ages) { 8 if (!frequencies[age]) { 9 frequencies[age] = 0; 10 } 11 frequencies[age] += 1; 12} 13 14// Find the age with a max frequency 15let maxFreq = 0; 16let modeAge = -1; 17for (const age in frequencies) { 18 if (frequencies[age] > maxFreq) { 19 maxFreq = frequencies[age]; 20 modeAge = age; 21 } 22} 23console.log('Max frequency:', maxFreq); // Max frequency: 4 24console.log('Mode age:', modeAge); // Mode age: 22
While
loops can also be used similarly for complex tasks.
Finally, let's unwrap the reduce
function, a powerful tool for performing complex aggregations. It applies a binary function to all elements in an iterative and cumulative way. For example, let's calculate the product of all elements in a list using the reduce
function.
JavaScript1const ages = [21, 23, 20, 25, 22]; 2const product = ages.reduce((a, b) => a * b, 1); // 1 is the start value for the calculation 3// This performs the following calculation: (((((1 * 21) * 23) * 20) * 25) * 22) 4console.log(product); // Output: 5313000
By using the multiplication function as the binary function, reduce
has computed the product of all elements in our array.
We can also use reduce
to accomplish more challenging tasks. Consider for instance the problem of separately computing the sums of even numbers and odd numbers in the ages
array.
JavaScript1const ages = [21, 23, 20, 25, 22]; 2const sums = ages.reduce((acc, curr) => { 3 if (curr % 2 === 0) { 4 acc.evens += curr; 5 } else { 6 acc.odds += curr; 7 } 8 return acc; 9}, { evens: 0, odds: 0 }); 10console.log(sums) // Output: {evens: 42, odds: 69}
In this second example, elements of the array are summed into even and odd categories. Starting with an accumulator object { evens: 0, odds: 0 }
, the function checks each element: if it's even, it adds to evens; if odd, it adds to odds. The final result is an object showing the sum of all even and odd numbers separately.
Fantastic! You've just learned how to use basic and advanced data aggregation methods in JavaScript, even including the reduce
function! These techniques are pivotal in data analysis and understanding. Now, get ready for the practical tasks lined up next. They'll reinforce the skills you've just gained. Remember, the more you practice, the better you become. Good luck with your practice!