Skip to main content

How to Filter an Array of Objects Based on a Property in JavaScript

Filtering an array of objects to find items that match a specific condition is a fundamental and frequent task in JavaScript. You might need to find all active users, select products within a certain price range, or get a list of all tasks assigned to a particular person. The most idi-omatic and modern way to do this is with the Array.prototype.filter() method.

This guide will teach you how to use filter() to get all objects that match a condition, and how to use the related find() method when you only need the first matching object.

Use Case: When you need to find all objects in an array that satisfy a condition.

The filter() method is the perfect tool for this job. It iterates over an array and returns a new array containing every element for which the callback function returns a truthy value.

For example, you have an array of user objects and need to get a new array containing only the users who are active.

// Problem: How to get an array of just the active users?
const users = [
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' },
  { id: 3, name: 'Charlie', status: 'active' },
];

This clean, one-line solution is the best practice.

const users = [
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' },
  { id: 3, name: 'Charlie', status: 'active' },
];

const activeUsers = users.filter(user => user.status === 'active');

console.log(activeUsers);

Output:

[
  { id: 1, name: 'Alice', status: 'active' },
  { id: 3, name: 'Charlie', status: 'active' }
]
note

If no elements match the condition, filter() will safely return an empty array [].

How to Find Only the First Matching Object: Array.prototype.find()​

Use Case: When you only need to find the first object that satisfies a condition, and you don't need to check the rest of the array.

The find() method iterates over the array and returns the first element that causes the callback function to return true. As soon as a match is found, it stops iterating, which makes it very efficient. If no match is found, it returns undefined.

For example, you have an array of users and need to find the single user with a specific ID.

const users = [
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' },
  { id: 3, name: 'Charlie', status: 'active' },
];

Solution:

const userWithId2 = users.find(user => user.id === 2);

console.log(userWithId2);
// Output: { id: 2, name: 'Bob', status: 'inactive' }

Because it short-circuits, find() is more performant than filter() when you only need one item.

Why Functional Methods are the Best Practice​

While you could always use a manual for loop to filter an array, the functional methods (filter and find) are generally preferred in modern JavaScript.

However the manual for...of Loop is more verbose:

const users = [/* ... */];
const activeUsers = []; // 1. Must initialize an empty array

for (const user of users) {
  if (user.status === 'active') {
    activeUsers.push(user); // 2. Must manually push into it
  }
}
note

The functional methods are better because they are:

  • More Declarative: They describe what you want to do (filter, find) rather than how to do it (loop, check, push).
  • More Concise: They accomplish the goal with less boilerplate code.
  • Immutable: filter() returns a new array, which avoids side effects and aligns with modern programming patterns.

Practical Example: Filtering Products by Category​

This script takes an array of products and filters it to create a new array containing only the products from the "electronics" category.

const products = [
  { id: 'a1', name: 'Laptop', category: 'electronics', price: 1200 },
  { id: 'b2', name: 'T-Shirt', category: 'apparel', price: 25 },
  { id: 'c3', name: 'Keyboard', category: 'electronics', price: 75 },
  { id: 'd4', name: 'Jeans', category: 'apparel', price: 60 },
];

function filterByCategory(products, category) {
  return products.filter(product => product.category === category);
}

// Get all electronics products
const electronics = filterByCategory(products, 'electronics');

console.log(electronics);

Output:

[
  { id: 'a1', name: 'Laptop', category: 'electronics', price: 1200 },
  { id: 'c3', name: 'Keyboard', category: 'electronics', price: 75 }
]

Conclusion​

For filtering an array of objects in JavaScript, modern array methods provide clean, readable, and efficient solutions.

  • To get a new array containing all objects that match a condition, the best method is Array.prototype.filter().
  • To get only the first object that matches a condition, use Array.prototype.find() for better performance.

These functional methods are the recommended best practice over manual loops, as they lead to more declarative, concise, and maintainable code.

Table of Contents