Day 20: Consolidation 3

Lesson 3: Higher Order Functions 2

1. findIndex

find gives you the element from an array, findIndex will give you the index (location) of the first found item in the array.

Using the same example as find():

<h1>Hello World<h1>

const cars = [
    {model: "Vantage", topSpeed: 230},
    {model: "Juke", topSpeed: 130},
    {model: "5 Series", topSpeed: 190},
];

const index = cars.findIndex((car) => car.model === "Juke");
console.log(index);

This will log 1 since that's the index of the car with the model of "Juke" (remember that arrays start their index at 0, not 1).

Change the code above to look for a car model that isn't in the list, you'll see it now prints -1. This is JavaScripts odd way of saying "Couldn't find an item"

2. some

some let's us see if any items in our array return try for a condition. In a way this is like find and findIndex in that if they find something you will get an item or a number, and if they don't you will get undefined or -1 BUT instead some will simply return true or false. It returns true when at least one array element returns true for your condition or false if none of them do.

Let's see if any of our cars have top speeds over 140 and then 250.

<h1>Hello World<h1>

const cars = [
    {model: "Vantage", topSpeed: 230},
    {model: "Juke", topSpeed: 130},
    {model: "5 Series", topSpeed: 190},
];

const haveFastCar = cars.some((car) => car.topSpeed > 140);
console.log(haveFastCar);

const haveReallyFastCar = cars.some((car) => car.topSpeed > 250);
console.log(haveReallyFastCar);

3. every

If some tells us if any items match our condition it should be clear that every tell us if every element matches our condition. It returns true if every element returns true and false as soon as one of them doesn't match our condition. Keeping with the car functions, heres an example.

<h1>Hello World<h1>

const cars = [
    {model: "Vantage", topSpeed: 230},
    {model: "Juke", topSpeed: 130},
    {model: "5 Series", topSpeed: 190},
];

const allCarsAreUsable = cars.every((car) => car.topSpeed > 100);
console.log(allCarsAreUsable);

const allCarsAreFast = cars.every((car) => car.topSpeed > 150);
console.log(allCarsAreFast);

4. reduce

Ahhh, reduce every new developers nemesis. reduce lets us apply a function to every element in an array, return a value and then pass that value into the next iteration of the function.

In plain English we could take a list of numbers 1, 2, 3, 4, 5 and sum them up with reduce starting with 0 like this.

• 0 + 1 = 1 ➡️ return 1
• 1 + 2 = 3 ➡️ return 3
• 3 + 3 = 6 ➡️ return 6
• 6 + 4 = 10 ➡️ return 10
• 10 + 5 = 15 ➡️ return 15

And so we get 15 as the result.

<h1>Hello World<h1>

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce((runningTotal, number) => {
    return runningTotal + number;
}, 0);

console.log(total);

We can even use reduce to transform an array of objects. Let's take a list of students and just make a comma separate list from an array of more complex objects.

<h1>Hello World<h1>

const students = [
    {name: "Harry Potter", house: "Gryffindor"},
    {name: "Hermione Granger", house: "Gryffindor"},
    {name: "Ron Weasley", house: "Gryffindor"},
    {name: "Draco Malfoy", house: "Slytherin"},
    {name: "Luna Lovegood", house: "Ravenclaw"},
    {name: "Cho Chang", house: "Ravenclaw"},
    {name: "Cedric Diggory", house: "Hufflepuff"},
    {name: "Severus Snape", house: "Slytherin"},
    {name: "Ginny Weasley", house: "Gryffindor"},
    {name: "Tom Riddle", house: "Slytherin"},
    {name: "Sybil Trelawney", house: "Hufflepuff"},
    {name: "Gilderoy Lockhart", house: "Ravenclaw"}
];

const studentList = students.reduce((list, student) => {
    return `${list}, ${student.name}`;
}, '');
console.log(studentList);

5. reduceRight

Like reduce but starts at the end and works backwards. It's like calling .reverse() on you array first and then calling .reduce()