.includes For Noobs

CONTENTS

1. Crash-Landing
2. Syntax
3. Search Within Arrays
4. Tell It When To Start! (Index, and Indexing Negatives)
5. Examples

CRASH-LANDING

Peer into the soul of JavaScript and interrogate what the meaning of code is .include is a JavaScript method that searches for whatever you pass in it, wherever you tell it to search. It then returns true or false based on if it found what you were searching for. It is a very simple, but powerful method. For us beginners (me and you!) we'll just be looking at the syntax and attaching to array variables.

QUICK NOTES

• You cannot search for multiple items at once with .includes.

SYNTAX

The syntax for .includes is .includes(value, i), where value is what we're searching for, can be an integer or string, and i is where we're starting the search. Remember JavaScript starts at 0!

SEARCHING WITHIN ARRAYS

Let's say we have an array of our moral character, and we want to know if our array contains certain items. With .includes, we can easily do this! Let's take a look.

const morals = ["honor", "courage", "justice", "yourself"];

We're trying to find some courage to continue tackling JavaScript, so let's use .includes to see if morals has our courage!
To do this on arrays, we simply call the array and place the syntax of .includes after it, as such:

// is the computer's response. If you want to see it, don't forget the console.log

const morals = ["honor", "courage", "justice", "yourself"];

morals.includes("courage"); 
// true
morals.includes("yourself"); 
// true
morals.includes("funny"); 
// false

You can also pass in integers instead of strings!

const numbers = [12, 22, 33, 44, 55];

console.log(numbers.includes(22));
// true
console.log(numbers.includes(39));
// false

If you would like to play with these examples, check out this CodePen!

TELL IT WHEN TO START

(INDEX AND NEGATIVE INDEX)

Now that we have the basics of .includes, let's look that that second thing .includes can take. Let's review syntax:

.includes(value, i)

Earlier, we were substituting things into the value portion, now we will be substituting something in for i, or the index. For the .includes method, this means where the computer will start looking for the number.

Check out this code:

const cities = ["Dallas", "Miami", "New York City", "Seattle"];

When we just pass in a string to search for, as we did in the section previous, the computer defaults to 0 -- start at the beginning.
Placing in a number, remembeirng that JavaScript starts at 0, we can tell JavaScript when to searching for it. If a value is within the array, but before the index, it will return false because of this.

Notice the changes in output:

const cities = ["Dallas", "Miami", "New York City", "Seattle"];

cities.includes("Dallas");
// true
cities.includes("Dallas", 0);
// true
cities.includes("Dallas", 1);
// false

Pretty simple, right? Good! Now let's do the final thing with .includes... Negative indexes! Woo!

Negative indexes act the same as indexes, but start from the end and work forward. When counting from the back, the 0 is not the first digit, contrary to regular JavaScript number counting. So in an array of [1, 2, 3] the 1 is an index of -3.

Let's see it under the microscope:

const people = ["Mike", "Jebs", "Sarah", "Gary", "Phil", "Merilyn", "Macy", "Stacy", "Hacy", "Lacy"];

people.includes("Lacy", -2);
// true. JS starts its search at Hacy
people.includes("Merilyn", -4)
// false. JS starts its search at Macy

Congratulations, you now understand this simple yet powerful little method! Go out into the world, and fix all its problems using .includes now.

Found this blog helpful? Didn't like it? Let me know!

Thanks, and Happy Coding!
~bananabrann