JavaScript Array find() Method

What You’ll Learn

The find() method returns the first element that passes your test, or undefined if none match. It short-circuits on success. This tutorial covers callback syntax, five examples, handling no-match cases, and comparisons with filter() and findIndex().

Introduction

When you need one item from a list—the first user with an admin role, the first product in stock, the first score above 90—find() is the direct tool. It walks the array until your callback returns true, then returns that element immediately.

If you need all matches, use filter(). If you need the index instead of the value, use findIndex().

Understanding the find() Method

array.find(callback) invokes your callback for each element in order. The first time the callback returns a truthy value, find() returns that element and stops. If every callback is falsy, the result is undefined.

Unlike indexOf, which compares with strict equality (===), find() lets you write any custom test function—ideal for objects and complex conditions.

📝 Syntax

General form of Array.prototype.find:

array.find(callback(element, index, array), thisArg)

Parameters

• callback — predicate tested on each element; first truthy match wins.
• element — current array item.
• index — optional; position of the element.
• array — optional; the array being searched.
• thisArg — optional; value to use as this inside the callback.

Return value

• The first element for which the callback is truthy.
• undefined if no element passes the test.
• Original array unchanged.

Common patterns

• arr.find(n => n > 20) — first number above 20.
• users.find(u => u.id === id) — lookup by primary key.
• arr.find(x => x?.active) — first active record.
• arr.find(Boolean) — first truthy value.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const numbers = [10, 25, 5, 40, 15];

const result = numbers.find((n) => n > 20);

console.log(result);
// 25

25

const numbers = [10, 25, 5, 40, 15];

const result = numbers.find((n) => n > 50);

if (result !== undefined) {
  console.log(result);
} else {
  console.log("No element found.");
}
// No element found.

No element found.

const numbers = [10, 25, 5, 40, 15];
const target = 5;

const found = numbers.find((n) => n === target);

console.log(found);
// 5

5

const users = [
  { id: 1, username: "john_doe" },
  { id: 2, username: "jane_smith" },
  { id: 3, username: "bob_jones" }
];

const foundUser = users.find((user) => user.username === "jane_smith");

console.log(foundUser);
// { id: 2, username: "jane_smith" }

{ id: 2, username: "jane_smith" }

const products = [
  { id: 101, name: "Laptop", price: 1200 },
  { id: 102, name: "Smartphone", price: 800 },
  { id: 103, name: "Tablet", price: 400 }
];

const product = products.find((p) => p.id === 102);

console.log(product);
// { id: 102, name: "Smartphone", price: 800 }

{ id: 102, name: "Smartphone", price: 800 }

🚀 Common Use Cases

• User lookup — find account by email, username, or id.
• Cart & catalog — locate product by SKU or slug.
• Config — pick the first matching rule or feature flag.
• Validation — detect the first invalid field in a form array.
• Navigation — resolve the active menu item from a tree.
• Games — find the first enemy in range or alive player.

📝 Notes

• Returns undefined when nothing matches—not null or -1.
• Short-circuits: elements after the first match are never tested.
• A matching undefined element is indistinguishable from “not found” without findIndex.
• Do not mutate the array in ways that reorder unvisited indexes during the search.
• For last-match searches in modern JS, use findLast().
• ES2015 method—not available in Internet Explorer without a polyfill.

💡 Best Practices