Check If Value Exists in Array in JavaScript and jQuery

Last Updated on by in JavaScript
Today we are going to work with arrays in JavaScript. In this tutorial, we are going to find out how to check whether an Array contains a particular value or not.When we talk about JavaScript and jQuery both come with some built-in methods, which returns the position of the value in the array.

JavaScript Loop

Let’s start with the for loop, and this for loop thing is best to have when you have to iterate over the arrays to find out the value.

var moviesList = ['The Godfather','Forrest Gump','The Matrix','Inception','Catch Me If You Can','Pulp Fiction'];
 
function findValueInArray(value,arr){
  var result = "Doesn't exist";
 
  for(var i=0; i<arr.length; i++){
    var name = arr[i];
    if(name == value){
      result = 'Exist';
      break;
    }
  }

  return result;
}

findValueInArray('Pulp Fiction', moviesList);
// Result : Exist

findValueInArray('Avenger', moviesList);
// Result : Doesn't exist

We’ve seen the old school way above to find out an item within the array in JavaScript. Now i am going to make it more simpler by using some inbuilt JavaScript and jQuery methods to search through an array.

Array.indexOf()

This array method helps us to find out the item in the array in JavaScript. If element exists in the array it returns the index position of the value and if the value doesn’t exist then it returns -1.

It works with both string and an array in JavaScript.

Syntax

put-array-or-string-here.indexOf()
var moviesList = ['The Godfather','Forrest Gump','The Matrix','Inception','Catch Me If You Can','Pulp Fiction'];

var string = "Catch Me If You Can";

// Find in Array
moviesList.indexOf('Pulp Fiction');
// Result: 5

moviesList.indexOf('The Nun');
// Result: -1

// Find in String
string.indexOf('M');
// Result: 6

jQuery.inArray()

This jQuery array method search the the item within the array. If element exists in the jQuery array it returns the index position of the value and if the value doesn’t exist then it will return -1.

jQuery.inArray() method works with the both string and an array.

Syntax

jQuery.inArray( value, array [, fromIndex ] )
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.inArray demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"Karl" not found, so <span></span></div>
<div>"Pete" is in the array, but not at or after index 2, so <span></span></div>
 
<script>
var arr = [ 4, "Pete", 8, "John" ];
var $spans = $( "span" );
$spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );
$spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );
$spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );
$spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );
</script>
 
</body>
</html>

Output

// Result: "John" found at 3
// Result: 4 found at 0
// Result: "Karl" not found, so -1
// Result: "Pete" is in the array, but not at or after index 2, so -1