Learn Advanced Array Methods – Part 4

Building a Statistics Calculator (Step 28 – 58)

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.**

Now I am on the part where we need to find the mode. The mode is the number that appears most in the list. I start out by declaring a function named getMode which takes array as a parameter like before. Inside of the function I need to loop over the elements in the array and count the occurrence of each one to find which occurs most often.

Probably the easiest way to do this is to use a forEach() loop and to store the results in an object where the key is the number and the value is the amount of times the number appears in the set.

In the forEach() loop, the goal is to increment the counts[el] by 1 each time the object is found. If it is not found, counts[el] is reset to 1.

So what I have so far:

const counts = {}; // assigning an empty object to counts
array.forEach(el => {  // initiating the forEach loop
if (counts[el]) {  // checking if counts[el] is truthy
counts[el] += 1;  // adds 1 to the value of counts[el]
} else { 
counts[el] = 1; // sets the count back to 1
}
})
return counts;  // returns the counts variable;
}

If every value appears the same number of times, there is no mode. To test for this we can use a Set(). A Set() is a data structure that only allows unique values. It will remove duplicates if an array is passed into it.

What I need to do next is create an if statement that checks if the size property is equal to 1, which would indicate that every value appears the same number of times. So I create a new Set() in the condition of the if statement. The Set to be evaluated are the values in the counts object (Object.values(counts)). Then dot notation is use to add the .size property to the set.

  if (new Set(Object.values(counts)).size === 1) {
    return null;
  }

Took me a few tries on this because I don’t remember accessing an object in this way before so I wasn’t sure of the proper syntax. I had to look that up but it wasn’t difficult to find.

After this if statement is done, I need to figure out what value occurs with the highest frequency using the Object.keys() method and then .sort() it. The instructions say to use the count object to compare the values of each.

Object.keys() is used to get an array of the keys out of an object. They didn’t really explain that in the exercise. Anyway here’s the finished code for the mode.

const getMode = (array) => {
  const counts = {};
  array.forEach((el) => {
    counts[el] = (counts[el] || 0) + 1;
  })
  if (new Set(Object.values(counts)).size === 1) {
    return null;
  }
  const highest = Object.keys(counts).sort(
    (a, b) => counts[b] - counts[a]
  )[0];
  const mode = Object.keys(counts).filter(
    (el) => counts[el] === counts[highest]
  );
  return mode.join(", ");
}

The next thing that needs to be done is the function to get the range, which is the difference between the largest and smallest numbers in the list.

Before, Math.floor() was used to round a number down to the nearest integer. There are many Math methods built into JavaScript. Two more are .min() to get the smallest number, and .max() to get the largest. Using those Math methods we can pull the largest and smallest numbers, then subtract them to get the range. This one is very simple.

const getRange = (array) => {
  return Math.max(...array) - Math.min(...array);
}

Variance is the next one. It represents how much of the data deviates from the mean. I’ve never done this before (like in school) so this is new to me. It will take a few steps. The function will first get the mean from the getMean() function, then use array.map() to subtract the element from the mean. After that we square each of the differences using ** 2, then find the sum of the squared differences. To find the sum of the squared differences, .reduce() can be used. Don’t forget to add the initial value of the accumulator in the code!

Apparently all of that can be put into the reduce call to make the code less messy. After that is all condensed, the last thing to do is divide .reduce() by the length of the array in the variance declaration, then return variance.

Finally, the last calculation is standard deviation which I have also never heard of before but oh well. Evidentially it is the square root of the variance which shouldn’t be too difficult to pull off. I start by assigning a call to the getVariance() function inside of the new getStandardDeviation() function. Another Math method, .sqrt() is used to find the square root of a number. Who would have known. That can be used on the variance variable that I declared in the getStandardDeviation(). Then I update the HTML to show the result and the Statistics Calculator is completed.