In this lesson, you'll learn a few methods related to finding items in an array.
When to Use the Find Method
If you want to find a single value in an array, there is the handy .find() method for that!
Similar to .filter(), to consider something "found" it will need a value that coerces to true. Once this happens, it will exit the loop and return the found value:
const values = [1, 2, 3, 4, 5];
const foundElement = values.find((val) => {
console.log(val);
return val == 3;
});
console.log('found', foundElement);
/*
1
2
3
found 3
*/
Note how it exits the loop once it has found an element.
Variation of the Find Method - FindIndex
There are other variations on the .find() method:
const values = [1, 2, 3, 4, 5];
values.findIndex((val) => val == 3); // 2, which is the index of the number 3
.findIndex() works in the same way as .find(), but instead of returning the value, it returns the index of the first value that matches the criteria.
Other Methods for Finding Items in an Array
There are also some convenience methods available, such as .includes() and .indexOf():
const values = [1, 2, 3, 4, 5];
values.includes(3); // true
values.indexOf(3); // 2
These don't take callback functions, but the value that you are looking for. .includes() returns true if the value is present in the array and false otherwise. .indexOf() returns the index of the value if it is present in the array and -1 otherwise.
If all you're interested in is finding out whether an item is in an array, then .includes() is the one you want to use.
Boolean Methods
Sometimes you want to check if all or some of the elements of an array meet a certain criteria.
Boolean methods such as .every() and .some() are handy for these kind of checks. Similarly to .find() they coerce return values into true or false.
const values = [1, 2, 3, 4, 5, 6];
values.every((number) => number > 0); // true every number is over 0
values.every((number) => number > 3); // false every number is not over 3
values.some((number) => number > 3); // true at least one number is over 3
Learn by Doing
Copy the examples from this lesson and get them working in your labs. Make a few variations, too.
If you're doing this course step-by-step, and especially if you're in the mentorship program, please be sure to push your work to GitHub when you're done.
Summary: JS Array Find Method and More
You've just expanded your knowledge on working with arrays in JavaScript and the variety of methods at your disposal. Specifically, you've learned that:
.find()helps retrieve the first element in an array that satisfies a provided testing function, and exits the loop as soon as it finds a match..findIndex()operates similarly to.find(), but it gives back the index of the found element instead of the element itself..includes()simply returns a boolean indicating whether a certain value is found within the array..indexOf()provides you with the position of an element in the array, falling back to-1if the element isn't present.- For overall checks based on a condition,
.every()and.some()are very practical, returning a boolean to indicate if all or some elements satisfy the condition, respectively.