How to Search an Array in JavaScript How to Search an Array in JavaScript

Array.filter(), Array.find(), Array.includes(), and Array.indexOf()

Ashish Lahoti
Javascript
Page content

In this tutorial, we’ll learn how to search elements in an Array using different Array methods in JavaScript.

Array.filter()

Array.filter() method takes a condition as a function and return an array of elements satisfying that condition.

Example 1
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allEvenNumbers  =  array.filter(n => n%2==0);  // [2, 4, 6, 8, 10]
const allOddNumbers   =  array.filter(n => n%2==1);  // [1, 3, 5, 7, 9]
const greaterThanNine =  array.filter(n => n>9);     // [10]
Example 2
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const yellowFruits = fruits.filter(fruit => fruit.color == "yellow").map(fruit => fruit.name); // ["mango", "banana"]

const lowCalories  = fruits.filter(fruit => fruit.calories <=50).map(fruit => fruit.name); // ["orange", "kiwi"]

Array.find()

Array.find() method takes a condition as a function and return the first element satisfying that condition.

Example 1
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allEvenNumbers  =  array.find(n => n%2==0);  // 2
const allOddNumbers   =  array.find(n => n%2==1);  // 1
const greaterThanNine =  array.find(n => n>9);     // 10
Example 2
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const yellowFruits = fruits.find(fruit => fruit.color == "yellow"); 
console.log(yellowFruits); // prints {name: "mango", color: "yellow", calories: 135}

const lowCalories  = fruits.find(fruit => fruit.calories <=50); 
console.log(lowCalories); // prints {name: "orange", color: "orange", calories: 50}

Array.includes()

Array.includes() method look for the given value and return true if find in the array, otherwise return false.

Example 1
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const includesTen    = array.includes(10);  // true
const includesTwenty = array.includes(20);  // false
Example 2
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const includesMango = fruits.map(fruit => fruit.name).includes("mango"); // true
const includesBlue  = fruits.map(fruit => fruit.color).includes("blue"); // false
Example 3

Count the number of vowels in a given string:-

const vowels = ['a', 'e', 'i', 'o', 'u'];
const string = "codingnconcepts";
const countVowels = word.split("").map(char => vowels.includes(char) ? 1 : 0).reduce((a, b) => a + b);
console.log(countVowels); // prints "4"

Array.indexOf()

Array.indexOf() method look for the given value and return index if find in the array, otherwise return -1.

Example 1
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const indexOfTen    = array.indexOf(10);  // 9
const indexOfTwenty = array.indexOf(20);  // -1
Example 2
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const indexOfMango = fruits.map(fruit => fruit.name).indexOf("mango"); // 0
const indexOfBlue  = fruits.map(fruit => fruit.color).indexOf("blue"); // -1