CONTENTS
- Crash-Landing
- Syntax
- Search Within Arrays
- Tell It When To Start! (Index, and Indexing Negatives)
- 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
Top comments (5)
Add js after 3 symbols to color.
Oh hey, thank you so much! I went ahead and updated it.
Ahhh... includes(), or rather, its early Firefox equivalent, .contains(), is currently the bane of my existence at work. We have an application that has been locked to Firefox 39 for several years due to certain plugins we utilize never being updated and we've just finally started the upgrade to the latest version of FF, which, of course, supports the new .includes() spec and dropped .contains() entirely (39 was the last to support it, funny enough). One of our other devs utilized .contains() pretty liberally and things are breaking everywhere as a result. Until we get everything sorted, everyone is staying on 39, which means we can't simply replace .contains() with .includes() as it will work in one browser version, but not the other. Our solution so far has been to just replace everything with .indexOf(). Wish we could use .includes() as its syntax is more meaningful and it's slightly more robust.
Why don't you polyfill
.contains
and switch to the latest version?I'm pretty sure you've already considered this, but it seems a reasonable alternative to doing a search and replace to the entire codebase.
Unfortunately, it'd be just as tedious of a task. It's a vendor system we're working with and we extend it by creating small JS plugins. You have to create a "script list" for every plugin you create, as they're self-contained little windows that the system runs in their own iframes. We'd have to go through the code base and find every instance of the .contains() usage and then find the script list associated with all of them and include the polyfill. It's not something we can just add to every instance the software creates, unfortunately, otherwise it'd be a super simple task :(