Table of Contents

Searching for Elements in the Array

Code Playground is only enabled on larger screen sizes.

In this lesson, let's go over some of the methods used to search for items in the array.

indexOf() and lastIndexOf()

Using the indexOf() method, you can locate the first occurrence of the given item in the array.

javascript
let arr = ["Apple", "Orange", "Orange"];
 
console.log(arr.indexOf("Orange")); // -> 1

Notice that there are two "Orange"s in this array, but only the location of its first occurrence is returned.

If the element does not exist in the array, the method will return -1.

javascript
let arr = ["Apple", "Orange", "Banana"];
 
console.log(arr.indexOf("Peach")); // -> -1

lastIndexOf() is the opposite of indexOf(). It returns the location of the last occurrence of the item.

javascript
let arr = ["Apple", "Orange", "Orange"];
 
console.log(arr.lastIndexOf("Orange")); // -> 2

Similarly, if the element does not exist in the array, -1 will be returned.

javascript
let arr = ["Apple", "Orange", "Orange"];
 
console.log(arr.lastIndexOf("Peach")); // -> -1

find(), findIndex(), findLast(), and findLastIndex()

This is a set of the more advanced searching methods for arrays, as it searches the array based on a test function.

The test function

If you are new to programming, and have no idea what a function is, you can go through the function lessons first, and then come back to this topic.

javascript
let arr = [23, -5, 667, 1, -3, 6, 17, -69];
 
let answer = arr.find(testFunction);
 
// find the first array element that is greater than 50
function testFunction(value, index, array) {
  return value > 50;
}
 
console.log(answer); // -> 667

The find() method will pass each item in the array to the test function, and the first element that passes the test will be returned.

The test function accepts three arguments,

  • value: Corresponds to each element in the array,
  • index: The index number of that element, and
  • array: The entire array.

You will encounter many more helper functions like this that accept a predefined list of arguments, and some of them might be difficult to understand.

In this case, you could print them out into the console using console.log(). This will help you understand what they are, and what you can do with them.

javascript
let arr = [23, -5, 667, 1, -3, 6, 17, -69];
 
let answer = arr.find(testFunction);
 
function testFunction(value, index, array) {
  console.log(`Value: ${value}`);
  console.log(`Index: ${index}`);
  console.log(`Array: ${array}`);
  console.log("\n");
 
  return value > 50;
}
 
console.log(answer);
text
Value: 23
Index: 0
Array: 23,-5,667,1,-3,6,17,-69
 
Value: -5
Index: 1
Array: 23,-5,667,1,-3,6,17,-69
 
Value: 667
Index: 2
Array: 23,-5,667,1,-3,6,17,-69

find()

As demonstrated before, find() returns the first item that passes the test.

javascript
let arr = [23, -5, 667, 1, -3, 6, 17, -69];
 
// returns true when the value is greater than 50
function testFunction(value, index, array) {
  return value > 50;
}
 
let found = arr.find(testFunction);
console.log(found); // -> 667

findIndex()

findIndex() returns the index of the first item that passes the test.

javascript
let arr = [23, -5, 667, 1, -3, 6, 17, -69];
 
// returns true when the value is greater than 50
function testFunction(value, index, array) {
  return value > 50;
}
 
let idx = arr.findIndex(testFunction);
console.log(idx); // -> 2

findLast()

findLast() returns the last item that passes the test.

javascript
let arr = [1, 60, 23, 150, 6, 667, 17];
 
// returns true when the value is greater than 50
function testFunction(value, index, array) {
  return value > 50;
}
 
let last = arr.findLast(testFunction);
console.log(last); // -> 667

findLastIndex()

findIndex() returns the index of the last item that passes the test.

javascript
let arr = [1, 60, 23, 150, 6, 667, 17];
 
// returns true when the value is greater than 50
function testFunction(value, index, array) {
  return value > 50;
}
 
let lastIdx = arr.findLastIndex(testFunction);
console.log(lastIdx); // -> 5

filter()

The filter() method is similar to find(), except, instead of returning a single value, filter() returns an array of all values that passes the test.

javascript
let arr = [23, -5, 667, 150, -3, 60, 17, -69];
 
let answer = arr.filter(testFunction);
 
function testFunction(value, index, array) {
  return value > 50;
}
 
console.log(answer); // -> [ 667, 150, 60 ]

every()

The every() method iterates over the entire array, and examines if all element passes a test.

If they all pass, every() returns true, and if not, every() returns false.

javascript
let arr = [1, 2, 3, 4, 5];
 
let answer = arr.every(testFunction);
 
// Check if element is greater than 0
function testFunction(value, index, array) {
  return value > 0;
}
 
console.log(answer); // -> true

every() terminates at the first item that does not pass the test, as checking the rest of the array is no longer necessary.

some()

The some() method iterates over the entire array, and examines if any element passes a test.

If there are any elements that pass, some() returns true.

If none of them pass, some() returns false.

javascript
let arr = [1, 2, 3, 4, 5];
 
let answer = arr.some(testFunction);
 
// Check if element is greater than 0
function testFunction(value, index, array) {
  return value > 0;
}
 
console.log(answer); // -> true

some() terminates at the first item that passes the test, as checking the rest of the array is no longer necessary.

includes()

The includes() method tests if a given value exists in the array.

javascript
let arr = [1, 2, 3, 4, 5];
 
let answer = arr.includes(100);
 
console.log(answer); // -> false

You can also provide an index, which tells the includes() method to check if the value exists at the exact index.

javascript
let arr = [100, 2, 3, 4, 5];
 
// Check if 100 exist at index 2
let answer = arr.includes(100, 2);
 
console.log(answer); // -> false

Notice that even though 100 exists in the array, it does not exist at the index 2, so the method returns false.