Includes, contains or has. Finding things in iterables (lists) in JavaScript
When writing JavaScript, very frequently I need to check if a given thing exists in a list of things. Every single time I need to look up the function that does that for the sort of list I’m working with.
You see, there are three possible options: includes()
, contains()
and has()
and I mix them up all the time. So I’m writing this for my own reference.
The main problem
Checking if a given thing is in a list is a common action in JavaScript (for me at least). For example, I do it when I need to check if a specific class is applied to an element, or if a return value of a function matches one of multiple values.
The function name to use for this depends on the type of list you’re working with, even though the signature of each function is exactly the same.
You call a function on the list with the item as an argument and you end up with a boolean that tells you if the item is in the list or not:
// returns true or false
list.function(item);
For arrays, you need to use the includes()
function.
classList is a DOMTokenList
, and those use contains()
.
Maps (and WeakMaps) are relatively new features and act as a sort of “better” object (I won’t go into the differences in this article).
To figure out if a given key exits in a Map, you need to use has()
.
Sets (and WeakSets) are relatively new features and act as a sort of “better” array (Again, I won’t go into the differences in this article).
For Sets you also need to use has()
.
In handy table form:
| Function to use |
---|
Array | .includes() |
---|
classList | .contains() |
---|
Map | .has() |
---|
Set | .has() |
---|
Why is it not all the same?
Honestly I don’t know.
We can split JavaScript into two parts: language features and DOM APIs. Both of these are made/designed by different groups of people: language features by ECMA and DOM APIs essentially by browser vendors.
classList is a DOM api whereas Array, Set and Map are all language features, which could explain the difference between classList and the rest.
It still doesn’t explain why Array uses includes
and Sets and Maps use has
. I can’t think of a good reason other than oversight during API development, but maybe someone can tell me.
In any case I hope that having written this down will help me remember better, or that it will at least be a quick lookup for me.
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
Related articles
Javascript , 19 May 2020Did you know you can create files using JavaScript right inside your browser and have users download them? You can create files with a proper name and mime type and it only takes a few lines of code. Creating downloadable files with JavaScript in your browser only takes a few lines of code. Check out the…
Electron , 14 January 2019If you develop desktop applications with Electron, you will quickly need an application menu. Even if you don’t have any menu options that are specific to your application, you will still want to add a menu to get things like copy and paste to work on a mac. Usually you’ll just copy and paste the…
Apps Electron , 24 April 2018The Electron App framework makes it really easy to build cross-platform applications. I know this, because I’ve made a bunch. But how do you find out if people are using the features in your application? You could ask them or wait for them to tell you, but you can also use Google Analytics’ event tracking…