In JavaScript, when a developer works with Arrays, one of the typical tasks is to determine that whether a given value exists in the Array or not.
For example, a developer may want to ensure that a list of objects contains unique names.
There are two different ways of finding whether Array contains the item or not.
- First, one is the include() method, if Array contains the value, it will return true, or if the Array does not have the value, it will return false.
- Second, one is the filter() method, if Array contains the value, it will return that value, or if Array does not contain the value, it will not execute the Array.
- Third is the indexOf() method, if Array contains the value, it will return index of the value, or if Array does not contain the value, it will return -1.
In this article, we will execute both methods and see different results.
Table of Contents
1. Using include() Method
In JavaScript, the include() method finds whether an Array contains the specific value or not. It returns true if the value is found else, it will return false.
It contains two arguments: one is used to search the item, and the second is start_position which is used to search the item.
It is the position point from where the element being searched starts. Element argument is required, but start_position argument is optional.
Syntax:
array_name.includes(element, start_position); Coding Scenaio#01: If We Search for the Item that We Know Exists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for desired country</p>
<p id="demo"></p>
<script>
var countries = ["Pakistan", "USA", "Japan", "Germany", "UK", "China", "Italy"];
var desiredCountry = countries.includes("Japan");
document.getElementById("demo").innerHTML = desiredCountry;
</script>
</body>
</html> Output:
oding Scenario#02: If We Search for an Item that We Know Does Not Exist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for desired country</p>
<p id="demo"></p>
<script>
var countries = ["Pakistan", "USA", "Japan", "Germany", "UK", "China", "Italy"];
var desiredCountry = countries.includes("Iran");
document.getElementById("demo").innerHTML = desiredCountry;
</script>
</body>
</html> Output:
Coding Scenario#03: If We Search for the Item that We Know Exists with its Starting Position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for desired country</p>
<p id="demo"></p>
<script>
var countries = ["Pakistan", "USA", "Japan", "Germany", "UK", "China", "Italy"];
var desiredCountry = countries.includes("Japan", 2);
document.getElementById("demo").innerHTML = desiredCountry;
</script>
</body>
</html> output:
Coding Scenario#04: If We Search for the item that does not exist on the Given Position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for desired country</p>
<p id="demo"></p>
<script>
var countries = ["Pakistan", "USA", "Japan", "Germany", "UK", "China", "Italy"];
var desiredCountry = countries.includes("USA", 2);
document.getElementById("demo").innerHTML = desiredCountry;
</script>
</body>
</html> output:
2. JavaScript Array Contains: filter()
The JavaScript filter() method finds whether an Array contains the specific value or not. And return the value if the value is found else; it will not execute the Array.
This method iterates an Array of objects to search for a specific value. It contains only one argument that is a function which used to find the specific value.
syntax:
var filterArray = array_name.filter(function(item) {
return item;
});
Let’s have a look at an example. Suppose we want to apply for a scholarship at an international level in a particular program.
We want to check whether our desired country is offering a scholarship in that program.
Coding Scenario#01: If We Search for the Item that We Know Exists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for desired program by Country Name</p>
<p id="demo"></p>
<script>
var scholorships = [ {program : "Master", Country : "Pakistan"},
{program : "UnderGraduate", Country : "USA"},
{program : "PHD", Country : "Japan"},
{program : "PostGraduate", Country : "UK"}
];
var find_scholorships = scholorships.filter(scholorship => (scholorship.Country === 'USA'));
for(var key in find_scholorships) {
var value = find_scholorships[key];
}
document.getElementById("demo").innerHTML = value.program;
</script>
</body>
</html> output:
Coding Scenario# 02: If We Search for an Item that We Know Does Not Exist.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for desired program by Country Name</p>
<p id="demo"></p>
<script>
var scholorships = [ {program : "Master", Country : "Pakistan"},
{program : "UnderGraduate", Country : "USA"},
{program : "PHD", Country : "Japan"},
{program : "PostGraduate", Country : "UK"}
];
var find_scholorships = scholorships.filter(scholorship => (scholorship.Country === 'Germany'));
for(var key in find_scholorships) {
var value = find_scholorships[key];
}
document.getElementById("demo").innerHTML = value.program;
</script>
</body>
</html> output:
3. JavaScript Array Contains: indexOf()
syntax:
Array_name.indexOf(element, start_position); Let’s have a look at an example. Suppose we want to search for a name from an array of names.
Coding Scenaio#01: If We Search for the Item that We Know Exists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for a name</p>
<p id="demo"></p>
<script>
var names = ["Ahmed", "Ali", "Fatima", "Iqra", "Farhan"];
var seachedName = names.indexOf("Iqra");
if(seachedName>=0){
var index = "The name exists at index " + seachedName;
} else {
var index = "The name does not exists"
}
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html> output:
Coding Scenario#02: If We Search for an Item that We Know Does Not Exist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Search for a name</p>
<p id="demo"></p>
<script>
var names = ["Ahmed", "Ali", "Fatima", "Iqra", "Farhan"];
var seachedName = names.indexOf("Ayan");
if(seachedName>=0){
var index = "The name exists at index " + seachedName;
} else {
var index = "The name does not exists"
}
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html> output:
Conclusion:
In this article, we have discussed JavaScript Array Contains. We observed two different types of JavaScript Array Contains. One was the include() method, and the second was the filter() method. In include() method, two arguments were required, and another one was optional. We saw two examples of both and got different results. The first method was returning a Boolean value, i.e., true or false. There was only one argument in the filter() method, and we have seen its examples too. This method was either returning the value or was not executing the Array at all.
