Day 20: Consolidation 3

Lesson 2: Higher Order Functions 1

Higher order functions was a big topic, lets review what you learned.

1. forEach

Let's take 3 concepts and combine them:

1. Arrays are really objects in JavaScript and so have other properties on them you can call, like .length
2. Objects have functions stored as a property and you can call them like this myObject.myFunction()
3. Functions can take other functions as inputs and they can be anonymous (not have a name)

With those 3 concepts in mind I want you to look at this code

1let ages = [22, 45, 12, 6];
2
3ages.forEach((age) => {
4  console.log(age);
5});

forEach lets you iterate over an array an call a function for each item in the array. It returns nothing, it just lets you look at and run a function for every item in an array.

2. sort

sort let's you sort an array by iterating over every item, comparing it to its neighbors and returning a positive number or a negative depending on if you want them sorted ascending or descending.

<h1>Hello World<h1>

const ages = [12, 3, 7, 33, 23, 68, 7, 44];
console.log(ages);

const sortedAges = ages.sort((a, b) => a - b);

console.log(sortedAges);
console.log(ages);

If you swap a and b in the sort function so it looks like this ages.sort((a, b) => b - a) then it will be sorted the other way.

You can sort anything you want, not just numbers. So long as there is a way that you can get a calculation that will give a negative or positive number, then you can sort an array of strings or objects as well.

This will sort names by number of letters:

1const strings = ["Simon", "David", "Sara", "Rita"];
2
3const sortedStrings = strings.sort((a, b) => a.length - b.length);
4console.log(sortedStrings);

If you want to sort objects based on one of their properties that's easy enough as well:

1const cars = [
2  { model: "Vantage", topSpeed: 230 },
3  { model: "Juke", topSpeed: 130 },
4  { model: "5 Series", topSpeed: 190 },
5];
6
7const sortedCars = cars.sort((a, b) => a.topSpeed - b.topSpeed);
8console.log(sortedCars);

3. map

map is the workhorse of these functions, used to transform and change array elements, you will use this all the time.

<h1>Hello World<h1>

const names = ["harry", "ron", "Hermione", "ginny"];

const uppercased = names.map((name) => name.toUpperCase());
console.log(uppercased);

It works great for objects as well.

<h1>Hello World<h1>

const students = [{name: "Harry", age: 13}, {name: "Ron", age: 12}, {name: "Hermione", age: 13}, {name: "Ginny", age: 10}];

const housedStudents = students.map(student => {   
  student["house"] = "Gryffindor";
  return student;
})

console.log(housedStudents);

4. filter

filter lets us create new array by filtering another array. We give it a function that is applied to each element in the array and if we want to keep that item return true, if we don't want it in the new array we return false.

<h1>Hello World<h1>

const ages = [13, 17, 21, 33];

const over18 = ages.filter((age) => age > 18);

console.log(over18);

If no item returns true then we get an empty array, if just one returns try then you will get an array of one, if two return true then you get a two item array etc. You will always get an array back. The function doesn't change the array you start with, it returns a new array.

5. find

filter will give you an array of items back, find will give you the first item found in an array that returns true for a given function. If no items returns try then you will get undefined

Find first person over 20

<h1>Hello World<h1>

const ages = [13, 17, 21, 33];

const over20 = ages.find((age) => age > 20);

console.log(over65);

Find first person over 65

<h1>Hello World<h1>

const ages = [13, 17, 21, 33];

const over65 = ages.find((age) => age > 65);

console.log(over65);

That's the first half these functions reviewed, let's look at the back half in the next lesson.