How to filter an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Filtering arrays based on specific conditions is fundamental for data processing, search functionality, and creating subsets of data that match user criteria in JavaScript applications.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented array filtering extensively in components like search bars, data tables, and dashboard filters where users need to narrow down large datasets.
From my extensive expertise, the most powerful and functional approach is using the filter() method, which creates a new array containing only elements that pass a test condition.
This method is immutable, chainable, and provides excellent readability for complex filtering logic.
Use the filter() method to create a new array with elements that meet a specific condition.
const numbers = [1, 2, 3, 4, 5, 6]
const evenNumbers = numbers.filter(num => num % 2 === 0)
// Result: [2, 4, 6]
The filter() method creates a new array by testing each element against a provided function and including only those that return true. In this example, num => num % 2 === 0 tests if each number is even, and filter() creates a new array containing only the even numbers [2, 4, 6]. The original array remains unchanged. The callback function receives three arguments: the current element, its index, and the entire array, giving you full control over the filtering logic.
Best Practice Note:
This is the same approach we use in CoreUI components for implementing search functionality and data table filtering across our component ecosystem.
Chain multiple filters for complex conditions: array.filter(item => item.active).filter(item => item.category === 'premium'). For performance with large datasets, consider using a single filter with multiple conditions combined with logical operators.
