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.
let arr = ["Apple", "Orange", "Orange"];
console.log(arr.indexOf("Orange")); // -> 1Notice 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.
let arr = ["Apple", "Orange", "Banana"];
console.log(arr.indexOf("Peach")); // -> -1lastIndexOf() is the opposite of indexOf(). It returns the location of the last occurrence of the item.
let arr = ["Apple", "Orange", "Orange"];
console.log(arr.lastIndexOf("Orange")); // -> 2Similarly, if the element does not exist in the array, -1 will be returned.
let arr = ["Apple", "Orange", "Orange"];
console.log(arr.lastIndexOf("Peach")); // -> -1find(), 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.
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); // -> 667The 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, andarray: 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.
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);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,-69find()
As demonstrated before, find() returns the first item that passes the test.
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); // -> 667findIndex()
findIndex() returns the index of the first item that passes the test.
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); // -> 2findLast()
findLast() returns the last item that passes the test.
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); // -> 667findLastIndex()
findIndex() returns the index of the last item that passes the test.
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); // -> 5filter()
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.
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.
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); // -> trueevery() 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.
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); // -> truesome() 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.
let arr = [1, 2, 3, 4, 5];
let answer = arr.includes(100);
console.log(answer); // -> falseYou can also provide an index, which tells the includes() method to check if the value exists at the exact index.
let arr = [100, 2, 3, 4, 5];
// Check if 100 exist at index 2
let answer = arr.includes(100, 2);
console.log(answer); // -> falseNotice that even though 100 exists in the array, it does not exist at the index 2, so the method returns false.
let arr = ["Apple", "Orange", "Orange"]; console.log(arr.indexOf("Orange")); // -> 1