top of page

Methods to Search through Arrays in JavaScript.



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:

  1. Array.Includes()

  2. Array.indexOf()

  3. Array.find()

  4. 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

0 comments

Σχόλια


bottom of page