JavaScript Array find() Method: Search Array Items
Direct Answer & Overview
The JavaScript Array find() method returns the first element in an array that satisfies a provided testing callback function. If no element satisfies the testing condition, it returns undefined, enabling fast linear searches across collections.
JavaScript Source Code
const users = [
{ id: 1, name: "John" },
{ id: 2, name: "Suresh" },
{ id: 3, name: "Alex" }
];
const user = users.find(user => user.id === 2);
console.log(user);How does this JavaScript code work?
Array.prototype.find() traverses an array in ascending order and executes a predicate callback on each item until it finds one that returns a truthy value. Upon finding a match, find() halts further iteration immediately and returns that specific element. If it reaches the end of the array without finding a match, it returns undefined. This makes find() significantly more efficient than filter() when only a single match is required.
What is the expected terminal output?
Executing this code in JS CodeLab produces the following stdout sequence in the developer console:
{"id":2,"name":"Suresh"}Common mistakes to avoid
- !Expecting find() to return an array of all matches; use filter() if you need all matching items.
- !Forgetting that find() returns undefined on no match, leading to TypeError when trying to access properties on the result.
- !Using findIndex() when you need the item itself, or vice versa.
- !Writing predicate callbacks that do not return a boolean value.
Frequently Asked Questions
What does Array find() return if no element matches?
If no element satisfies the testing predicate, find() returns undefined.
Does Array find() stop iterating after finding a match?
Yes. The find() method short-circuits: it stops evaluating subsequent array elements as soon as the callback returns truthy.
How do you find the index of an element instead of the element itself?
Use Array.prototype.findIndex(), which returns the numerical index of the first matching element, or -1 if no element matches.
Comprehensive Tutorial
Want an in-depth understanding of this topic?
Read our complete, interactive tutorial covering memory management, edge cases, and best practices.
Read the full map vs-foreach tutorial →