Learn Advanced Array Methods – Part 1

Building a Statistics Calculator (Steps 1-9)

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

Originally I wasn’t going to write about each individual exercise from freecodecamp, but I decided it would be good for me to do it so I can reinforce and better understand what I’m learning (hopefully). I wonder if I should go back and do the previous ones too, but I’ve gotten through a lot already.

I start off by assigning the user input to a variable, and then split it into an array of numbers with the .split() method and a regex to separate the numbers at the commas.

It is important to remember that the value of an input element always returns a string, even if the input type is “number.” The array is currently an array of strings, so it needs to be converted into the number type.

To do this, JavaScript has a built in .map() method. The .map() method creates a new array and does not change the original one.

The .map() method takes a callback function as its first argument. The callback function inside of .map() also takes multiple arguments, but the first one is referencing the current element that is being processed.

const calculate = () => {
const value = document.querySelector("#numbers").value;
const array = value.split(/,\s*/g);
const numbers = array.map(el => Number(el));
}

The Number() constructor will return NaN if the value cannot be turned into a number. Arrays have a built in method to remove indicated values; .filter(). This will return a new array with the remaining values and will not change the original. The .filter() method also takes a callback function as its first argument. The .filter() method looks for a Boolean value from this callback. If true is returned, the value is added to the array.

Important: you cannot check for equality because NaN is not equal to itself.

There is a method called isNaN() that returns true if the argument is NaN. This can be used in .filter() to find the NaN values. Because I want the number values to be added to the array, I want to check if the result of isNaN() is NOT NaN. To do that I add the ! before isNaN(). That way if el is NaN, I’ll get false instead of true, therefore only adding numbers to the array.

Array methods can be chained together so they can be executed at the same time. That means I can just add the .filter() method after the .map() method.

Before:

const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el));
  const filtered = numbers.filter(el => !isNaN(el));
}

After:

const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));;
}

I am done with the calculate function for now.

More to come.