Arrays can be used to store multiple values in a variable. When you work with Arrays, you may require to check if an array contains an Item in Javascript.
You can check if an array contains an Item using array.includes("searchValue")
in JavaScript.
Basic Example
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
console.log(birds.includes("owl"));
Output
true
This tutorial teaches you the different methods to check if an array contains an object in JavaScript and when it is appropriate to use each method
Using Array.includes()
The Array.includes() method checks if an array contains an item and returns True
if it exists. Else, False
.
Use this method when you want to check if an array contains an item and return the result as a boolean True
or False
.
Syntax
arr.includes(searchValue)
arr.includes(searchValue, fromIndex)
ParameterssearchValu
e – Value searched for in an array. On string and character comparison, includes()
is case-insensitive.
fromIndex
(optional) – Search begin position for searchValue
in the array. Defaults to 0
.
Code
The following code demonstrates how to check if an array contains a specific item using the includes()
method.
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
console.log(birds.includes("owl"));
Output
true
Code
The following code demonstrates how to use the fromindex
while using the includes()
method.
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
console.log(birds.includes("owl", 1));
Output
You can see the includes()
is having two parameters, searchValue
as “owl” and fromIndex
as 1.
In this case, fromIndex
is a positive number, so the search will start from the fromIndex
position, which is the index position 1
. SearchValue
(“owl”) is present at position 1, so includes()
returns true.
true
Let’s see another example of fromIndex
having passed with negative values.
Code
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
console.log(birds.includes("owl", -1));
Output
The fromIndex
is a negative value. In order to determine the first search position, array.includes()
will calculate the arr.length(5) + fromIndex(-1) which is 4. The first search position will start at 4, as searchValue(“owl”) is present at index 1, .includes("owl", -1)
will return false.
false
The array.includes()
uses the sameValueZero
algorithm to identify whether the given element is found.
Using Array.indexOf()
The indexOf()
method returns the first index position of the search item if it is present else returns -1
.
Use this method when you want to check if an array contains a specific item and return its index value.
Syntax
arr.indexOf(searchValue)
arr.indexOf(searchValue, fromIndex)
ParameterssearchValue
– Actual value searched for in an array.
fromIndex
(optional) – the index position from which the search takes place.
Return Value
- Returns index position, if searchValue is found in the array
- Returns -1 if searchValue is not found in the array
Code
The following code demonstrates how to use the indexOf()
method to check if an item is available in the array.
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
console.log(birds.indexOf("owl"));
Output
Here, indexOf()
will return the index position(1), as the searchValue(“owl”) is present at index position 1.
1
Let us see an example of fromIndex
having passed with a positive value.
Code
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
console.log(birds.indexOf("owl",3) );
Output
In this example, the result is false because indexOf("owl",3)
is forced to start the search from the 3rd index position, and as the ‘owl’ value is present at index position 1, indexOf() concludes that value is not present in the array and returns -1.
-1
includes() vs indexOf()
This section explains the behaviour of includes()
and indexOf
() for different primitive types.
const symbol = Symbol('owl');
const array = [
symbol,
0,
200,
null,
undefined,
'string'
];
array.includes() | array.indexOf() |
---|---|
array.includes(symbol); // true | array.indexOf(symbol) !== -1; // true |
array.includes(0); // true | array.indexOf(0) !== -1; // true |
array.includes(200); // true | array.indexOf(200) !== -1; // true |
array.includes(null); // true | array.indexOf(null) !== -1; // true |
array.includes(undefined); // true | array.indexOf(undefined) !== -1; // true |
array.includes(‘string’); // true | array.indexOf(‘string’) !== -1; // true |
You can see both includes() and indexOf()
behaviours are similar on the above primitive types.
But there is one type for which the results will be different.
const array = [NaN];
array.includes() | array.indexOf() |
---|---|
array.includes(NaN) // true | array.indexOf(NaN) !== -1 // false |
Using For Loop
This section teaches you how to use the forloop
to iterate over an array and check if an item exists in the array.
This is the traditional way of accessing the items of the array.
It is not recommended to use this method considering the performance.
Code
The following code demonstrates how to use the for loop to iterate over the array and check if an item exists in the array.
var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];
var len = birds.length;
var searchValue = 'owl';
for (var i=0; i<len ; i++){
if(birds[i] == searchValue){
console.log("true");
}
}
Output
true
JSfiddle
This tutorial is available in this JSFiddle.
Additional Resources
- How To Use For Each Over An Array In JavaScript?
- How To Remove An Item From An Array In JavaScript? – Definitive Guide?
- How To empty an array in JavaScript? – Detailed Guide
- How To Count Duplicate Values in An Array in JavaScript
- How To Check If an Array Is Empty or Exists in JavaScript
- How to Check if An Object is an Array in JavaScript