Last updated on January 8th, 2025 at 06:51 am
Web developers commonly use JavaScript arrays to store data. They are versatile data structures that allow you to store different types of data, and support a wide range of built-in functions. If your code depends on a specific value of an array element, and if that value is not present in your array, then your code will not work as expected. Therefore, web developers often check if JS arrays include specific value in JavaScript, to avoid such use cases. In this article, we will learn several different ways to check if array includes value using plain JavaScript.
How to Check if Array Includes Value in JavaScript
There are plenty of ways to check if array includes value. Let us look at some of them.
1. Using array.includes()
The includes() method returns true if an element exists in an array, else it returns false. It is available by default in every JS array. Here is its syntax.
array.includes(element)
Let us say you have the following array.
a = [1, 2, 3, 4, 5]
Here is the command to find if element 3 exists in the array.
console.log(a.includes(3)) // returns true
Here is the command to check if element 10 exists in the array.
console.log(a.includes(10)) // returns false
Please note, this is one of the fastest and most commonly used methods to look for an element in an array. It works on primitive data types as well as if your array contains JS objects and you need to check if an object is present in the array. Here is an example to illustrate it.
a = [{b:2},{c:3},{d:4}];
console.log(a.includes(a[1])) // returns true
2. Using indexOf()
IndexOf() function returns the index of first occurrence of an item in an array. If the item is not present in the array, then it returns -1. So we can use this function to check if an item exists in an array. Here is its syntax.
array.indexOf(element)
Here is an example to check if an array includes an element, using indexOf() function.
data = [1, 2, 3, 4, 5];
item = 3;
index = data.indexOf(item);
if( index >= 0 ){
console.log('item exists')
}else{
console.log('item does not exist')
}
This is also a very fast solution like using includes() function.
3. Using find() function
find() function allows you to test a condition against every element of an array and returns the first item that satisfies the condition. If there is no element that satisfies the condition, it returns undefined. Here is an example to illustrate it.
a = [1, 2, 3, 4, 5];
n1 = 3;
n2 = 6;
console.log(a.find(element => element === n1)) //returns 3
console.log(a.find(element => element === n2)) // returns undefined
In the above code, we define a test condition that checks each element to see if it is equal to n1. The find() function loops through the array, and in each iteration, checks if the present item element is equal to n1. We do the same thing with n2. In first case, it returns 3 and in the second case, it returns undefined.
4. Using filter() function
In JavaScript, filter() function iterates through a given array, tests each of its elements for a given condition, and creates a new array with all those elements that satisfy the condition. If no element satisfies the condition, it returns an empty array. So we can use the condition to check if our desired element is present in array.
a = [1, 2, 3, 4, 5];
n=6
f_arr= a.filter(element => element === n);
In the above code, we define an array a and the element n to be searched for. In filter() function, we check if in each iteration, if the present element is equal to the desired element n to be searched. All matching elements are stored in f_arr array.
In our case, since the element 6 is not present in original array, we will get an empty array. You can check if the result of filter() function is empty or not to determine if the element is present in the original array.
if(f_arr.length>0){
console.log('element is present');
}else{
console.log('element is not present');
}
5. Using some() function
All the above solutions work with primitive data types such as numbers and texts. For example, it works with an array or numbers or strings. What if you have an array of JS objects. If you want to check if a specific item is present in an array or not, then you can use some() function.
data = [ {b: '1'}, {b: '2'}, {b: '3'} ]
data.some(data => data.b === '3') // returns true
data.some(data => data.b === '4') // returns false
In the first case above, some() function iterates through each item of the data array. In each iteration, it checks if the b key’s value is equal to 3. Since one of the elements matches this condition, it returns true. In second case, since there is no match, it returns false.
This approach is slower that using includes() and indexOf() functions mentioned above. But it is very useful in doing complicated lookups such as searching for an item in an array of JS objects.
6. Using function prototype
Prototype functions are user-defined functions that can be invoked on the data type for which they are defined. You can also define a function prototype to easily re-use it everywhere across your site. We will define a prototype function to check if an array contains an item.
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
}
In the above function contains(), we accept an input argument obj that we need to check if it is present in the array. We calculate the length of the array and using a while loop, iterate through each item of the array. In each iteration, we check if the array item is equal to the desired item to be searched. If it is found, the function returns true, else it returns false. Here is how you can call it.
console.log([1, 2, 3].contains(2)); // output is true
console.log([1, 2, 3].contains(4)); // output is false
7. Using for loop
This is the most basic method to check if an array contains an item. It is slower than other methods but it is useful for very old web browsers that may not support other solutions. In this case, we simply loop through the array and in each iteration, check if the present item matches the desired element to be searched.
a = [1, 2, 3, 4, 5];
n = 3;
for (let i = 0; i < a.length; i++){
if (a[i] == n)
return n + ' is present';
}
8. Using jQuery
jQuery is a popular JavaScript library that makes it very easy to work with different types of data as well as page elements. It provides inArray() function that checks if an array contains a specific value.
Here is its syntax.
$.inArray(value, array, [fromIndex])
In the above function, the first argument is the value to be searched, the second argument is the array. The third argument is optional. It stands for the array index from where to begin the search. This is useful if you already have a good idea where the element is located in the array.
Here is an example to check if item 3 is present in array [1, 2, 3, 4, 5]
$.inArray(3, [1, 2, 3, 4, 5])
Conclusion
In this article, we have learnt several different ways to easily check if an element is present in an array or not. You can use any of these methods to check if array includes value as per your requirement. Among them, using includes() and indexOf() functions will give the fastest results. They work well on large arrays also. But they mainly work if your array items are primitive data types such as numbers and strings. They also work if array items are JS objects and also the item you are looking for is also an object. But if your array contains JS objects and you need to check if an item is present in any of the values in any of the object, then you can use some() to quickly check if any of the objects contains a specific value.
Also read:
How to Move Element Into Other Element in jQuery
How to Remove Duplicate Values from JS Array
Difference Between Let and Var in JavaScript
Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI & software development.