Admittedly when it comes to working with JavaScript and arrays, intiutively a lot of people would choose the contains method to check if the array - well, you guessed right, "contains" - an element. Also, if you come from a different language, for example Java, you'd also be used to using contains on an ArrayList.
In JavaScript the method we need to use is called includes but that being said, JavaScript also has a contains method but it is for a slightly different purpose.
There are four ways that the includes() method can be used in JavaScript today:
TypedArraysIndexedDBWe'll focus on the first two use-cases as those seem to be more common than the other two.
includes() for arrays takes two parameters where the second one is optional:
includes(elementToFind, index)The elementToFind parameter is rather straight forward - this is what specifies what element we are looking for. The second parameter defines a position within the array at which the search should begin for the element provided in parameter one. The includes() method returns a boolean.
Please note that if index is greater than or equal to array.length the search will not be performed and false will be automatically returned by includes().
includes() can also be used with strings, where a case-sensitive search is performed if a string is part of a larger corpus of text or not. In terms of the signature and return value, the behaviour is the same as discussed before, except of course that the second, optional parameter, is not an array index but a position within the string. (Where the location is inclusive.)
A few examples can be seen below for both versions.
See the Pen includes by Cloudinary (@Cloudinary) on CodePen.
Now that we have exhausted the use-cases for includes() let's turn our focus to contains(). There are a number of places where this method can be called/used:
NodeDOMTokenListLet's take a look at the second point because I had a very specific task at hand, and it took me some time to figure out what I was doing wrong. But first, let's take a look at the signature - bearing in mind that this is for he DOMTokenList:
contains(token)The method returns a boolean value.
For our example let's assume that we have a simple h1 element with two CSS classes:
<h1 class="title important">My title</h1>And that we'd like to check if a particular CSS class is added to the element programatically. If it's not added, we should remedy that:
const el = document.querySelector('h1');
if (!el.classList.contains('important')) {
el.classList.append('important')
}As it turns out the DOMTokenList looks and feels like an array, but it is not one. There are properties and some methods that we can access on it that would make us believe that we are dealing with an array but it is a separate interface. And henceforth, instead of using includes() we need to use contains().
There are ways that a DOMTokenList (or any other DOM Node) can be converted to an array. But once we do that we won't be able to use contains() but rather we'd have to go back to using includes().
const el = document.querySelector('h1');
const DOMTokenListAsArray = [...el.classList];I hope this helps clear things up. I don't particularly have a use-case where the DOMTokenList should be converted to an array because the available properties and methods do give us sufficient functionality.
As always, check out the example below.
See the Pen contains by Cloudinary (@Cloudinary) on CodePen.