JavaScript Array filter() Method

What You’ll Learn

The filter() method builds a new array from elements that pass a test function. This tutorial covers callback syntax, five examples, filtering objects, removing null values, and how filter() differs from map(), find(), and every().

Introduction

Real-world lists are rarely uniform. You might need only even numbers, active users, or products in stock. The filter() method selects matching items and returns them in a fresh array.

It is one of the most-used array methods in modern JavaScript—alongside map() and forEach()—because it expresses “give me the items that fit this rule” in a single readable line.

Understanding the filter() Method

array.filter(callback) calls your callback once per element. When the callback returns a truthy value, that element is copied into the result array. Falsy returns skip the element.

The original array is never shortened or replaced—you always get a new array reference, which may be empty if nothing passes.

📝 Syntax

General form of Array.prototype.filter:

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

Parameters

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

Return value

• A new array with all elements that passed the test.
• [] when no elements pass.
• Original array unchanged.

Common patterns

• arr.filter(n => n > 0) — keep positive numbers.
• users.filter(u => u.active) — keep active records.
• arr.filter(Boolean) — drop falsy values (0, "", null, etc.).
• arr.filter(Boolean).map(...) — clean then transform.

Examples Gallery

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

const numbers = [1, 5, 10, 15, 20];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers);
// [10, 20]
console.log(numbers);
// [1, 5, 10, 15, 20] — unchanged

[10, 20]
[1, 5, 10, 15, 20]

const numbers = [1, 5, 10, 15, 20];

const aboveTen = numbers.filter((num) => num > 10);

console.log(aboveTen);
// [15, 20]

[15, 20]

const students = [
  { name: "Alice", grade: 85 },
  { name: "Bob", grade: 92 },
  { name: "Charlie", grade: 78 }
];

const highPerformers = students.filter((student) => student.grade > 80);

console.log(highPerformers);
// [{ name: "Alice", grade: 85 }, { name: "Bob", grade: 92 }]

[{ name: "Alice", grade: 85 }, { name: "Bob", grade: 92 }]

const values = [10, null, 20, undefined, 30, 0];

const cleaned = values.filter((value) => value != null);

console.log(cleaned);
// [10, 20, 30, 0]

[10, 20, 30, 0]

const fruits = ["Apple", "Banana", "Cherry", "Apricot", "Blueberry"];
const query = "ap";

const matches = fruits.filter((fruit) =>
  fruit.toLowerCase().includes(query)
);

console.log(matches);
// ["Apple", "Apricot"]

["Apple", "Apricot"]

🚀 Common Use Cases

• UI lists — show only active, visible, or in-stock items.
• Search & sort prep — narrow data before rendering tables.
• Validation cleanup — remove null entries from API responses.
• Permissions — keep resources the current user may access.
• Analytics — isolate events matching criteria for reporting.
• Pipeline steps — filter().map() for select-then-transform flows.

📝 Notes

• Always returns a new array, even when every element passes (shallow copy of references).
• Callback should not mutate the array being iterated (avoid splice/shift during filter).
• Sparse array holes are skipped unless your engine treats them as undefined visits.
• filter(Boolean) removes 0 and ""—often too aggressive for numeric data.
• For a single match, find() is clearer and stops at the first hit.
• Available since ES5 with excellent browser support.

💡 Best Practices