includes() method determines whether or not an array contains a specific element, returning a boolean value true if the array contains the element, and false if the array does not contain the element.
This article will step you through how to implement the
includes() method into your website or web application by exploring a few real-world scenarios.
includes() Method Defined
ECMAScript 2016 took array searching functionality a bit further by providing the
includes() method, returning a boolean value rather than a numeric value.
includes() method is defined as follows:
elementparameter is required and is the element or value, that will be searched throughout each array index.
startparameter is optional, with a default value of 0, the first value within an array. This is the index in the array where the search will begin.
includes() Method Examples
Here are some quick examples to help you fully understand the logic behind the
var fruits = ["Apples", "Bananas", "Mangos", "Oranges"];
Here, we're creating an array with four elements, each element containing a type of fruit. We're then outputting the result to the console. The output in this example is true because the string "Oranges" exists in the
When searching for an element that does not exist in the array, the result will return false:
What Happens When the
start Value Is Less Than Zero
start value is negative, the computed index is calculated by adding the array length to the specified
start value. Here's an example:
var array = ["a", "b", "c"];
array.includes("a", -10); // true
array.includes("b", -10); // true
array.includes("c", -10); // true
array.includes("a", -2); // false
In this example, the array length is 3. And, for the first three
includes() checks, the
start value is -10:
3 + (-10) = -7
Meaning the actual
start value is -7, which is smaller than the length of the array. Here, true is returned since the
includes() method is able to search the entire array.
On the last line, the array length is still 3, but the
start value is -2:
3 + (-2) = 1
Now we're starting at array index 1, where b is located and searching through to the end of the array. Since a is at index 0 of the array, the element is not found and the method returns false.
Other Useful Tidbits
- Comparison strings and characters processed by the
includes()method are always case-sensitive. This means if the array contains the word "Oranges" but we're searching for text "oranges", the result will be false because the case is different between both occurrences of the word.
includes()method uses the
sameValueZero()operation to determine whether or not the given element is found within the array.
sameValueZero()operation accepts two parameters, x and y, and compares those two values returning true if the values match, and false if the values do not match, similar to the
includes() method is supported by most modern browsers and versions. The only exceptions at the time of this writing are all versions of Internet Explorer and Opera, where the
includes() method is not supported.
You can view all supported browsers and versions by clicking the button below:
includes() method provides a clean, easy to use solution for searching for specific elements within arrays by returning a boolean value, letting you know easily if the element exists or not.