Learn Advanced Array Methods – Part 2

Building a Statistics Calculator (Step 10-21)

Freecodecamp.com Tutorial

**This is not meant to be a tutorial or a guide on how to complete the tutorial. This is just my thought process and notes as I go through the steps myself.**

For the next segment, I start by creating a new function that I will use to find the mean of the series of user input numbers. It takes our array variable as the parameter. To find the mean (as I’m sure most people know) you need to add all of the numbers of the series and then divide the total by how many numbers there were. So if you had 10 numbers you would add them together and divide the total by 10.

To do this, I can use the array method .reduce(). This is a method that uses a callback function in order to condense an array into one value. However, .reduce() takes two parameters; the first is the accumulator and the second represents the current element of the array.

The value that is returned from this callback becomes the value of the accumulator. This means that when I evaluate the expression (addition in this example), the result will update the accumulator variable to its value. It is important to set the accumulator‘s initial value as the second parameter of the .reduce() method, otherwise it will default to the first element of the array which can cause unexpected results.

After that, I just need to divide the sum by the length of the array (array.length) and then return the value.

const getMean = (array) => {
  const sum = array.reduce((acc, el) => acc + el, 0);
  const mean = sum / array.length;
  return mean;
}

HOWEVER, I am able to clean this code up because of the ability to implicitly return values with an arrow function. This way the entire function can be written on one line instead of multiple lines with assigned variables.

All I need to do is remove the two variable declarations and add / array.length to the end of the reduce statement. Because of implicit return, the curly braces are no longer needed.

const getMean = (array) => array.reduce((acc, el) => acc + el, 0)/array.length;

With that cleaned up, I will add the getMean function to our calculate function so it can run when calculate() is called, and then I need to update the HTML to display the result of the calculation. I will do that by accessing the element that was given the “mean” id and changing its text content with our typical query selector process.

document.querySelector("#mean").textContent = mean;

The mean function is complete so now I move on to the median function. The median is the midpoint of a set of numbers. The first step to doing this is to sort the number set from least to greatest. There is another built in array method to arrange elements; .sort(). The .sort() method orders the elements in place, meaning it modifies the original array and you don’t need to create a variable to store a new array.

By default, .sort() converts the elements of an array into strings and then sorts them alphabetically (using Unicode) which is usually not what you want for numerical values. In order to circumvent the default, a callback function can be passed as an argument of .sort().

This callback function will compare two arguments (which represent the elements being compared) and return values based on if the first element should come before or after the second. A value greater than 0 means the first element should come AFTER the second element. A value less that 0 means that the first element should come BEFORE the second element. A returned value of 0 means that the elements should stay where they are.

I wanted to explain why 10 would be sorted before 2 if evaluated as a string, but I don’t quite understand and I’m trying to get further clarification. I guess it doesn’t matter all that much in the long run, but I would like to understand.

I think I’m going to stop here for today. Hopefully I have an explanation to my confusion by tomorrow and then I can document it.