The JavaScript array includes() method checks whether the given array contains the specified element. It returns true if an array contains the element, otherwise false.
Syntax
The includes() method is represented by the following syntax:
Parameter
element - The value to be searched.
start - It is optional. It represents the index from where the method starts search.
Return
A Boolean value.
JavaScript Array includes() method example
Here, we will understand includes() method through various examples.
Example 1
Let's see a simple example to determine whether the given array contains the specified element.
Test it NowOutput:
Example 2
In this example, we will provide the index from where the search starts.
Test it NowOutput:
Example 3
Let's see one more example to determine whether the includes() method is case-sensitive.
Test it NowOutput:
JavaScript offers a bunch of useful array methods to check whether an array contains a particular value.
While searching for primitive value like number or string is relatively easy, searching for objects is slightly more complicated.
In this post, you will read about how to determine if an array contains a particular value, being a primitive or object.
1. Array contains a primitive value
A primitive value in JavaScript is a string, number, boolean, symbol, and special value undefined.
The easiest way to determine if an array contains a primitive value is to use
javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
0 ES2015 array method:javascript
const hasValue = array.includes(value[, fromIndex]);
The first argument
javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
1 is the value to search in the array. The second, optional, argumentjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
2 is the index from where to start searching. The method returns a boolean indicating whetherjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
3 containsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
1.For example, let's determine whether an array of greeting words contains the values
javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
5 andjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
6:javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
7 returnsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
8 because the array containsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
5 item.But
javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
0 returnsjavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
1, denoting thatjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
6 is missing in thejavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
3 array.1.1 Searching from an index
javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
4 also accepts an optional second argument to start search for value starting an index.For example, let's start searching from the second item (index
javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
5 and up) in the array:javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
6 starts searching forjavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
7 letter from indexjavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
5. As expected, the letter is found.However,
javascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
9 returnsjavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
1 because the array from indexjavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
5 until the end doesn't contain the itemjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
2.2. Array contains an object
Checking if an array contains an object is slightly more complex than searching for primitive values.
Determining if an array contains a reference to an object is easy — just use the
javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
0 method. For example:javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
4 returnsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
8 because thejavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
3 array containsjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
7 object reference (which points to the first item of the array).But more often, instead of searching by reference, you'd like to search for objects by their content. In such a case
javascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
0 won't work:javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
4 returnsjavascript
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
1, because the array doesn't containjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
7 object reference. Although the array contains the objectjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
2 that looks exactly likejavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
7.Ok, so how do you determine if the array contains an object by content, rather than reference? Using
javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
4 method in combination with shallow or deep equality check of objects.During shallow equality check of objects the list of properties of both objects is checked for equality.
Here's a possible implementation of shallow equality check:
javascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
5 returnsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
8 in case if both compared objectsjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
7 andjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
8 have the same set of properties with the same values.In the following code snippet
javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
2 andjavascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
0 are equal by content, whilejavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
2 andjavascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
2 are not:javascript
const hi = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello); // => false
As a reminder, the array method
javascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
3 returnsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
8 if at least one timejavascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
5 function returnsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
8.Now, let's use the shallow equality function in combination with
javascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
3 method to find if the array contains an object by content:javascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.some(item => shallowEqual(item, toSearch)); // => true
javascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
8 checks every item of the array for shallow equality withjavascript
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
7 object.If the searched object contains also nested objects, then instead of
javascript
const hi = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello); // => false
0 function you could use the function.3. Summary
Searching for a primitive value like string or number inside of an array is simple: just use
javascript
const hi = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello); // => false
1 method.Determining if an array contains an object by content needs more moving parts. You have to use
javascript
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
3 method combined with shallow equality check:javascript
array.some(item => shallowEqual(item, value));
Note that the presented approaches are not the only ones. E.g. for a long time
javascript
const hi = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello); // => false
3 expression (which is slighlty clumsy) has been used to determine if thejavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
3 containsjavascript
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
1.What other ways to detect if an array contains a value do you know?
Like the post? Please share!
Suggest Improvement
Quality posts into your inbox
I regularly publish posts containing:
- Important JavaScript concepts explained in simple words
- Overview of new JavaScript features
- How to use TypeScript and typing
- Software design and good coding practices
Subscribe to my newsletter to get them right into your inbox.
SubscribeJoin 6946 other subscribers.
About Dmitri Pavlutin
Tech writer and coach. My daily routine consists of (but not limited to) drinking coffee, coding, writing, coaching, overcoming boredom 😉.