JavaScript Reference
Array.prototype.filter()
Creates a new array with only the elements that pass a test.
Last updated: October 2026
filter() returns a new array containing only the elements that pass your test. Use it when you need to keep some items and remove the rest.
Full definition: Array.prototype.filter() creates a new array with all elements that pass a test function. It doesn't modify the original array.
🎬 Live Example
Five common filter patterns. Click any button to see the output.
💡 filter never modifies the original array. It always returns a new one.
Basic Syntax
array.filter(callback(element, index, array))
// Returns a new array with only the elements
// for which callback returned truthy🎯 Syntax & Parameters
| Parameter | Type | Description |
|---|---|---|
callback | Function | Returns truthy to keep the element, falsy to skip. |
element | any | The current element being tested. |
index | number | Index of the current element. |
array | Array | The original array filter was called on. |
Filter Numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6, 8, 10]
const big = numbers.filter(n => n > 5);
// [6, 7, 8, 9, 10]
// Original is unchanged
console.log(numbers); // [1, 2, 3, ..., 10]Filter Objects
const users = [
{ name: 'Alice', age: 30, active: true },
{ name: 'Bob', age: 17, active: false },
{ name: 'Carol', age: 25, active: true },
{ name: 'Dave', age: 15, active: true }
];
// Only adults
const adults = users.filter(u => u.age >= 18);
// [Alice, Carol]
// Only active users
const activeUsers = users.filter(u => u.active);
// [Alice, Carol, Dave]
// Combined
const activeAdults = users.filter(u => u.active && u.age >= 18);
// [Alice, Carol]Filter Strings
const fruits = ['apple', 'banana', 'cherry', 'apricot'];
// Contains substring
const aFruits = fruits.filter(f => f.includes('a'));
// ['apple', 'banana', 'apricot']
// Starts with
const aStarts = fruits.filter(f => f.startsWith('a'));
// ['apple', 'apricot']
// Length filter
const short = fruits.filter(f => f.length <= 5);
// ['apple']Chain filter + map + reduce
const products = [
{ name: 'Widget', price: 10, inStock: true },
{ name: 'Gadget', price: 25, inStock: false },
{ name: 'Doohickey', price: 15, inStock: true },
{ name: 'Thingamajig', price: 30, inStock: true }
];
// Total price of in-stock products under $20
const total = products
.filter(p => p.inStock) // Keep in-stock only
.filter(p => p.price < 20) // And under $20
.map(p => p.price) // Extract prices
.reduce((sum, p) => sum + p, 0);
// 25 (Widget $10 + Doohickey $15)💡 Order matters: filter first, then map. This runs the map function only on filtered results — much faster when you have a large dataset.
Remove Duplicates
const numbers = [1, 2, 2, 3, 4, 4, 5, 5, 5];
// Using filter + indexOf
const unique = numbers.filter(
(n, i) => numbers.indexOf(n) === i
);
// [1, 2, 3, 4, 5]
// Cleaner with Set
const uniqueSet = [...new Set(numbers)];
// [1, 2, 3, 4, 5]🎯 filter vs find vs map
| Method | Returns | Use when |
|---|---|---|
filter | New array (subset) | You want all matching elements |
find | First matching element | You want only one result |
findIndex | Index or -1 | You need the position |
some | Boolean | You only need to know if any match |
every | Boolean | You need all to match |
⚠️ Common Mistakes
- Forgetting to return.
arr.filter(x => { x > 5 })returns an empty array. Usearr.filter(x => x > 5). - Confusing filter with find. filter returns an array. find returns a single element. Wrong choice breaks your code.
- Filtering after map when you should filter first. Always filter before mapping for better performance on large datasets.
- Expecting filter to modify the original. It doesn't. Assign the result to a new variable.
- Using filter just to check if something exists. Use
some()orincludes()— they short-circuit and are faster. - Falsy gotchas.
[0, '', null, undefined].filter(x => x)removes all of them. If you want to keep 0, usefilter(x => x !== null && x !== undefined). - Filtering on a condition that needs async. filter doesn't await promises. Precompute the results first.
❓ Frequently Asked Questions
What does Array.filter() do in JavaScript?
Array.filter() creates a new array containing only the elements that pass a test provided by a callback function. The callback returns true to keep the element or false to remove it.
What is the difference between filter and find?
filter returns a new array with all matching elements. find returns only the first matching element (or undefined). Use filter when you need multiple results.
Does filter modify the original array?
No. filter returns a new array. The original array is not modified. If no elements pass the test, it returns an empty array, not undefined.
Can I chain filter with map?
Yes. filter and map both return new arrays. Common pattern: filter first to reduce the dataset, then map to transform it. This is more efficient than mapping everything then filtering.
How do I filter an array of objects?
Use filter with a callback that accesses object properties. Example: users.filter(user => user.age >= 18) keeps only users 18 and older.