How to check if a value exists in an array using Javascript?
We continue with Flexiple's tutorial series to explain the code and concept behind common use cases. In this article, we will solve for a specific case: To check if a value exists in an array.We then also look at its implementation in Javascript and jQuery.
Where can we use this?
You might find this useful when- You want to execute a particular script if a certain value exists in an array
- You want to avoid adding duplicate values to the array
However, If you are just looking for the code, you can quickly check out the section below.
Table of Contents
Code Implementation
We are going to check for a value's existence in an array in 2 different ways using jQuery and Javascript1] Using jQuery
If you are someone strongly committed to using the jQuery library, you can use the .inArray[ ] method.If the function finds the value, it returns the index position of the value and -1 if it doesn't.
Syntax
jQuery.inArray[search-value, array-or-string-in-which-to-search];Code
//code to check if a value exists in an array using jQuery var fruits_arr = ['Apple', 'Mango', 'Grapes', 'Orange', 'Fig', 'Cherry']; var text = "Watermelon"; // Searching in Array console.log['Index : ' + jQuery.inArray['Fig', fruits_arr]]; console.log['Index : ' + jQuery.inArray['Peach', fruits_arr]]; // Searching in String variable console.log['Index : ' + jQuery.inArray["m", text]];Output
Index : 4 Index : -1 Index : 52] Using Javascript
Using Loop
The Idea behind it: We can check for the value we need by traversing the entire array using a looping function//code to check if a value exists in an array using javascript for loop var fruits_arr = ['Apple', 'Mango', 'Grapes', 'Orange', 'Fig', 'Cherry']; function checkValue[value, arr] { var status = 'Not exist'; for [var i = 0; i < arr.length; i++] { var name = arr[i]; if [name == value] { status = 'Exist'; break; } } return status; } console.log['status : ' + checkValue['Mango', fruits_arr]]; console.log['status : ' + checkValue['Peach', fruits_arr]];
Output
status : Exist status : Not existCode Explanation:
From line 3 of the code, you can see that we have an array of fruits with the name fruits_arr. This contains 6 elements namely Apple, Mango, Grapes, Orange, Fig and Cherry.
The function checkValue takes 2 parameters as input, the value that needs to be searched and the array in which the value needs to be searched.
Using a for loop the function compares each element of the array with the input value you wanted to check for. If it finds a match, the function breaks and the variable status is set to Exist, else it is set to Not Exist.
Join our Network of Top Engineers and Work with Top Startups & Companies!
- View 6 Similar Projects
Using Inbuilt function in Javascript
However, instead of writing a loop for this case, you can use the inbuilt function of Array.indexOf [] for the same case. If the value exists, then the function will return the index value of the element, else it will return -1
Syntax
put-array-or-string-here.indexOf[]
Code
//code to check if a value exists in an array using javascript indexOf var fruits_arr = ['Apple', 'Mango', 'Grapes', 'Orange', 'Fig', 'Cherry']; var string = "Orange"; // Find in Array fruits_arr.indexOf['Tomato']; fruits_arr.indexOf['Grapes']; // Find in String string.indexOf['g'];
Output
-1 2 4
If you are using modern browsers you may also use the includes[] function instead of the indexOf[] function
If you are using modern browsers you may also use the includes[] function instead of the indexOf[]function
Like indexOf[] function, theincludes[] function also works well with primitive types.
Using includes[ ]
//code to check if a value exists in an array using includes function array.includes['hello']; // true array.includes[300]; // true array.includes[0]; // true array.includes[undefined]; // true array.includes[null]; // true array.includes[symbol]; // true
Using indexOf[]
array.indexOf['hello'] !== -1; // true array.indexOf[300] !== -1; // true array.indexOf[0] !== -1; // true array.indexOf[undefined] !== -1; // true array.indexOf[null] !== -1; // true array.indexOf[symbol] !== -1; // true
Word of Caution
Case Sensitivity
Both includes[] and indexOf[]function are case sensitiveconst array = ['MANGO']; array.includes['mango']; // false array.indexOf['mango'] !== -1; // false You can make it case insensitive by changing the case of the array
const array = ['MANGO']; const sameCaseArray = array.map[value => value.toLowerCase[]]; // ['mango'] sameCaseArray.includes['mango']; // true sameCaseArray.indexOf['mango'] !== -1; // true For a more versatile solution, you can check out using the .some[] function which works well for a diverse array of data types.
Caveat of IndexOf[]
One place where indexOf[] and includes[] differ is shown belowconst array = [NaN]; // array.includes[NaN]; // true // array.indexOf[NaN] !== -1; // false
Browser Support
includes[] function is not supported by IE and in that case you might want to use the indexOf[] function to check if there is a value in a given array but keep in mind the caveat and limitations of the indexOf[] function.Other tutorials
Programming a Clock using Javascript
How to check if an array is empty using Javascript?
How to convert list to string python?
Top Articles
How to Craft a Freelance Resume as a Developer
Dev Shops What are they, and when to use them?
Upwork Reviews & Alternatives for Hiring Developers
Looking for Freelance Jobs?
- View 6 Open Projects
How to check if a value exists in an array using Javascript?
We continue with Flexiple's tutorial series to explain the code and concept behind common use cases. In this article, we will solve for a specific case: To check if a value exists in an array.We then also look at its implementation in Javascript and jQuery.
Where can we use this?
You might find this useful when- You want to execute a particular script if a certain value exists in an array
- You want to avoid adding duplicate values to the array
However, If you are just looking for the code, you can quickly check out the section below.
Table of Contents
Code Implementation
We are going to check for a value's existence in an array in 2 different ways using jQuery and Javascript1] Using jQuery
If you are someone strongly committed to using the jQuery library, you can use the .inArray[ ] method.If the function finds the value, it returns the index position of the value and -1 if it doesn't.
Syntax
jQuery.inArray[search-value, array-or-string-in-which-to-search];Code
//code to check if a value exists in an array using jQuery var fruits_arr = ['Apple', 'Mango', 'Grapes', 'Orange', 'Fig', 'Cherry']; var text = "Watermelon"; // Searching in Array console.log['Index : ' + jQuery.inArray['Fig', fruits_arr]]; console.log['Index : ' + jQuery.inArray['Peach', fruits_arr]]; // Searching in String variable console.log['Index : ' + jQuery.inArray["m", text]];Output
Index : 4 Index : -1 Index : 52] Using Javascript
Using Loop
The Idea behind it: We can check for the value we need by traversing the entire array using a looping function//code to check if a value exists in an array using javascript for loop var fruits_arr = ['Apple', 'Mango', 'Grapes', 'Orange', 'Fig', 'Cherry']; function checkValue[value, arr] { var status = 'Not exist'; for [var i = 0; i < arr.length; i++] { var name = arr[i]; if [name == value] { status = 'Exist'; break; } } return status; } console.log['status : ' + checkValue['Mango', fruits_arr]]; console.log['status : ' + checkValue['Peach', fruits_arr]];
Output
status : Exist status : Not existCode Explanation:
From line 3 of the code, you can see that we have an array of fruits with the name fruits_arr. This contains 6 elements namely Apple, Mango, Grapes, Orange, Fig and Cherry.
The function checkValue takes 2 parameters as input, the value that needs to be searched and the array in which the value needs to be searched.
Using a for loop the function compares each element of the array with the input value you wanted to check for. If it finds a match, the function breaks and the variable status is set to Exist, else it is set to Not Exist.
Join our Network of Top Engineers and Work with Top Startups & Companies!
- View 6 Similar Projects
Using Inbuilt function in Javascript
However, instead of writing a loop for this case, you can use the inbuilt function of Array.indexOf [] for the same case. If the value exists, then the function will return the index value of the element, else it will return -1
Syntax
put-array-or-string-here.indexOf[]
Code
//code to check if a value exists in an array using javascript indexOf var fruits_arr = ['Apple', 'Mango', 'Grapes', 'Orange', 'Fig', 'Cherry']; var string = "Orange"; // Find in Array fruits_arr.indexOf['Tomato']; fruits_arr.indexOf['Grapes']; // Find in String string.indexOf['g'];
Output
-1 2 4
If you are using modern browsers you may also use the includes[] function instead of the indexOf[] function
If you are using modern browsers you may also use the includes[] function instead of the indexOf[]function
Like indexOf[] function, theincludes[] function also works well with primitive types.
const symbol = Symbol['symbol']; const array = [ 'hello', 300, 0, undefined, null, symbol ];Using includes[ ]
//code to check if a value exists in an array using includes function array.includes['hello']; // true array.includes[300]; // true array.includes[0]; // true array.includes[undefined]; // true array.includes[null]; // true array.includes[symbol]; // true
Using indexOf[]
array.indexOf['hello'] !== -1; // true array.indexOf[300] !== -1; // true array.indexOf[0] !== -1; // true array.indexOf[undefined] !== -1; // true array.indexOf[null] !== -1; // true array.indexOf[symbol] !== -1; // true
Word of Caution
Case Sensitivity
Both includes[] and indexOf[]function are case sensitiveconst array = ['MANGO']; array.includes['mango']; // false array.indexOf['mango'] !== -1; // false You can make it case insensitive by changing the case of the array
const array = ['MANGO']; const sameCaseArray = array.map[value => value.toLowerCase[]]; // ['mango'] sameCaseArray.includes['mango']; // true sameCaseArray.indexOf['mango'] !== -1; // true For a more versatile solution, you can check out using the .some[] function which works well for a diverse array of data types.
Caveat of IndexOf[]
One place where indexOf[] and includes[] differ is shown belowconst array = [NaN]; // array.includes[NaN]; // true // array.indexOf[NaN] !== -1; // false