JavaScript Arrays
JavaScript
findreturns the first element that passes a test, orundefined.
Unlike filter, it gives you one element rather than an array.
It stops as soon as it finds a match.
Example
javascript
const numbers = [1, 8, 3, 12];
console.log(numbers.find(n => n > 4));The output is 8, the first match.
find returns the matching element itself.
findIndex returns its position, or -1 when nothing matches.
Both stop at the first match, so they are faster than filtering the whole array.
Syntax
javascript
array.find(function (value) {
return condition;
});The callback returns true for the element you want.
This is the usual reason to reach for find.
Example
javascript
const users = [
{ id: 1, name: "Ada" },
{ id: 2, name: "Grace" }
];
console.log(users.find(u => u.id === 2).name);The whole object is returned, so its properties can be read straight away.
This is worth guarding, because reading a property of undefined throws.
Example
javascript
const users = [{ id: 1 }];
const found = users.find(u => u.id === 99);
console.log(typeof found);Check the result before using it, or use optional chaining.
Use this when you need the position rather than the value.
Example
javascript
const list = ["a", "b", "c"];
console.log(list.findIndex(x => x === "b"));
console.log(list.findIndex(x => x === "z"));A missing value gives -1.
find gives one element; filter gives an array.
If you only need the first match, find says so more clearly and stops early.
Example
javascript
const numbers = [1, 8, 3, 12];
console.log(numbers.find(n => n > 4));
console.log(numbers.filter(n => n > 4).join(","));The first prints 8; the second prints 8,12.
This searches from the end and returns the last match.
Example
javascript
const numbers = [1, 8, 3, 12];
console.log(numbers.findLast(n => n > 4));The output is 12.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript find</title>
</head>
<body>
<h1>JavaScript find</h1>
<p id="result"></p>
<script>
const users = [
{ id: 1, name: "Ada" },
{ id: 2, name: "Grace" },
{ id: 3, name: "Alan" }
];
const user = users.find(function (u) {
return u.id === 2;
});
document.getElementById("result").innerHTML = "Found: " + user.name;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a missing id:
Search for id 99 and see what happens when nothing matches.
find returns the first matching element.undefined when nothing matches.findIndex returns the position, or -1.filter when you want every match.find is how you pull one item out of a list of objects.
Always consider what happens when nothing matches.
It is clearer and faster than filtering and taking the first element.