How to Use Array.find() in TypeScript?

If you’re working with arrays in TypeScript, you should know how to use the array.find() method, which retrieves the first element in an array that meets a specific condition.

In this tutorial, I will explain how to use Array.find() in TypeScript with clear syntax, detailed examples, and best practices.

What is Array.find() in TypeScript?

The find() method returns the first element in an array that satisfies a specified testing function. If no elements satisfy the testing function, it returns undefined.

Array.find() is particularly useful when you need to locate a specific item within a collection of data based on certain conditions.

Syntax

Here’s the basic syntax:

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

Where:

• callback: Function to execute on each element
• element: The current element being processed
• index (optional): The index of the current element
• array (optional): The array find() was called upon
• thisArg (optional): Object to use as this when executing the callback

It returns:

• The first element that satisfies the condition.
• undefined if no match is found.

Check out Convert TypeScript Enums to Arrays

Array.find() in TypeScript Examples

Now, let me show you two examples of using the array.find() method in TypeScript.

Let’s start with a simple example to understand how find() works:

// Define an array of numbers
const numbers: number[] = [5, 12, 8, 130, 44];

// Find the first element greater than 10
const found = numbers.find(element => element > 10);

console.log(found); // Output: 12

In this example, I’m looking for the first number in the array that’s greater than 10. The find() method returns 12 because it’s the first element that satisfies our condition.

I executed the above TypeScript code using VS code, and you can see the exact output in the screenshot below:

Now, let me show you another example.

type User = {
  id: number;
  name: string;
  isActive: boolean;
};

const users: User[] = [
  { id: 1, name: "Alice", isActive: false },
  { id: 2, name: "Bob", isActive: true },
  { id: 3, name: "Charlie", isActive: true },
];

// Find the first active user
const activeUser = users.find(user => user.isActive);

console.log(activeUser);
// Output: { id: 2, name: 'Bob', isActive: true }

Here’s what’s happening:

1. .find() loops through the users array.
2. For each user, it checks the condition in the callback: user.isActive.
3. The first user that returns true (meaning isActive === true) is returned.

You can see the exact output in the screenshot below:

Another important thing you should understand here is the return type in TypeScript.

By default, TypeScript infers the return type of Array.find() as the type of the array elements or undefined:

const activeUser: User | undefined

This is important. TypeScript forces you to handle the possibility of undefined, especially when you try to access properties.

Here is how you can use it.

if (activeUser) {
  console.log(activeUser.name); // Safe
} else {
  console.log("No active user found.");
}

Check out Get Distinct Values from an Array in TypeScript

When to Use Array.find() in TypeScript

Let me tell you where you should use the find() method in TypeScript and where you should not use it.

Use find() when:

• You want only the first matching element.
• You’re okay with possibly getting undefined.
• You want readable, concise code.

Avoid find() if:

• You need all matching elements → use filter() instead.
• You’re not handling the undefined case.

Difference Between find() and Similar TypeScript Methods

TypeScript also provides a few other methods to work with, such as Array.includes(), Array.some(), Array.filter(), etc.

When working with large datasets, it’s important to consider performance. Here’s a comparison of different array methods in TypeScript:

Method	Returns	Stops After	Best For
find()	Element or undefined	Finding first match	Finding a single specific element
filter()	New array	Processing all elements	Finding all matching elements
some()	Boolean	Finding first match	Checking if any element matches
includes()	Boolean	Finding first match	Checking for a specific value

For very large arrays, find() and some() can be more efficient than filter() since they stop once a match is found.

Check out Filter An Array with Multiple Conditions in TypeScript

Real-world example of using the TypeScript Array.Find() method

Let me show you a real-world example of using the array.find() method in TypeScript.

Here is how to use the find() in an e-commerce application. Let’s see a practical example of using find() in an e-commerce application. In this scenario, we’re implementing a product search feature that customers would use to locate specific items in our online store:

Below is the complete code:

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
  rating: number;
  description: string;
}

const products: Product[] = [
  { 
    id: "p1", 
    name: "iPhone 14 Pro", 
    price: 999, 
    category: "Electronics", 
    inStock: true,
    rating: 4.8,
    description: "Apple's flagship smartphone with advanced camera system"
  },
  { 
    id: "p2", 
    name: "MacBook Air M2", 
    price: 1199, 
    category: "Electronics", 
    inStock: false,
    rating: 4.9,
    description: "Ultra-thin laptop with Apple's powerful M2 chip"
  },
  { 
    id: "p3", 
    name: "Sony WH-1000XM5", 
    price: 349, 
    category: "Audio", 
    inStock: true,
    rating: 4.7,
    description: "Premium noise-cancelling headphones with exceptional sound quality"
  }
];

// Find a product by ID (common in e-commerce when a user clicks on a product)
function findProductById(productId: string): Product | undefined {
  return products.find(product => product.id === productId);
}

// Find first available product in a category with a minimum rating
// This could be used to recommend a top-rated product to customers
function findTopRatedAvailableProductInCategory(category: string, minRating: number = 4.5): Product | undefined {
  return products.find(product => 
    product.category === category && 
    product.inStock && 
    product.rating >= minRating
  );
}

const myProduct = findProductById("p2");
console.log(myProduct); // Returns the MacBook Air product object

const recommendedElectronics = findTopRatedAvailableProductInCategory("Electronics");
console.log(recommendedElectronics);

Here, the findTopRatedAvailableProductInCategory function is useful for showing relevant product recommendations to users based on multiple criteria – it searches for products that are both in stock and have high customer ratings.

You can see the output in the screenshot below:

Conclusion

The array.find() method in TypeScript is used for searching arrays. The array.find() method is ideal when you need the first match in a list in TypeScript. I also hope the real example that I have shown will be helpful.

You may also like:

• Filter Empty Strings from an Array in TypeScript
• Filter Duplicates from an Array in TypeScript
• Remove Null Values from an Array in TypeScript