DEV Community

Lee
Lee

Posted on • Updated on

.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"];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
chenge profile image
chenge

Add js after 3 symbols to color.

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

morals.includes("courage"); 
// true
morals.includes("yourself"); 
// true
morals.includes("funny"); 
// false
Collapse
 
bananabrann profile image
Lee

Oh hey, thank you so much! I went ahead and updated it.

Collapse
 
dinsmoredesign profile image
Derek D • Edited

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.

Collapse
 
avalander profile image
Avalander

Why don't you polyfill .contains and switch to the latest version?

Array.prototype.contains = Array.prototype.contains || Array.prototype.includes

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.

Collapse
 
dinsmoredesign profile image
Derek D

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 :(