In JavaScript, we often work with data that is stored in Arrays. A common task will be searching the array to find if it contains a value (or values) or not. Depending on the task , we will give Boolean value for confirmation, an index for the position of the value in the array, or a separate array containing all the search results.
In this article, you will learn different methods to search values through array. There are basically four methods:
Array.Includes()
Array.indexOf()
Array.find()
Array.filter()
1. Array.Includes()
The includes() method returns either a true or a false if a value exists in an array or not.
This is the basic syntax:
arr.includes(valueToFind[, fromIndex]);Example:
<!DOCTYPE html>
<html>
<body>
<h2>The includes() Method</h2>
<p>includes() returns true if an array contains a specified element:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Banana");
</script>
</body>
</html>Output
If you write
document.getElementById("demo").innerHTML = fruits.includes("Banana", 3);it will return you the False because the string value '3' is not a fruit and its not an array .
2. Array.indexOf()
The indexOf() method returns the first index of a value in an array. If there is no match, the method returns -1.
This is the basic syntax:
arr.indexOf(searchElement[, fromIndex])Example:
<!DOCTYPE html>
<html>
<body>
<h2>The indexOf() Method</h2>
<p>indexOf() returns the position of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let index = fruits.indexOf("Orange");
document.getElementById("demo").innerHTML = index;
</script>
</body>
</html>Output:
3. Array.find()
The find() method returns the first value in an array that matches the conditions of a function. If there is no match, the method returns undefined.
This is the basic syntax:
arr.find(callback(element[, index[, array]])[, thisArg])Example:
<!DOCTYPE html>
<html>
<body>
<h2>The find() Method</h2>
<p>find() returns the value of the first element in an array that passes a test (provided by a function):</p>
<p id="demo"></p>
<script>
const ages = [3, 10, 18, 20];
document.getElementById("demo").innerHTML = ages.find(checkAge);
function checkAge(age) {
return age > 18;
}
</script>
</body>
</html>Output:
4. Array.filter()
The filter() method returns a new array of all the values in an array that matches the conditions of a function. If there is no match, the method returns an empty array.
This is the basic syntax:
let newArray = arr.filter(callback(currentValue[, index[, array]]) {// return element for newArray, if true}[, thisArg]);Example:
<!DOCTYPE html>
<html>
<body>
<h2>The filter() Method</h2>
<p>Get every element in the array that has a value of 18 or more:</p>
<p id="demo"></p>
<script>
const ages = [28, 65, 17, 50];
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
function checkAdult(age) {
return age >= 18;
}
</script>
</body>
</html>Output:
The Tech Platform