How to Filter an Array in JavaScript

Use filter() when you want a new array that keeps only the items matching a condition. This is the cleanest way to remove unwanted values without changing the original array.

What you’ll build or solve

You’ll learn how to filter an array in JavaScript using filter(). You’ll also know how to keep matching items based on values, object properties, and multiple conditions.

When this approach works best

This approach is the right choice when you need to keep some items and discard the rest.

Common real-world scenarios include:

• Active users only
• Products under a price limit
• Search result filtering
• Completed tasks
• Removing empty values

This is a bad idea when you only need the first match. In that case, use find() instead.

Prerequisites

You only need:

• A JavaScript file or browser console
• A basic array
• Basic JavaScript array knowledge

Step-by-step instructions

Step 1: Use filter() with a condition callback

Pass a callback that returns true for items you want to keep.

const scores = [45, 72, 88, 31];

const passingScores = scores.filter(score => score >= 50);

console.log(passingScores);

The result is a new array with only matching values.

You can also filter arrays of objects.

const users = [
  { name: "Alex", active: true },
  { name: "Mia", active: false },
  { name: "Jordan", active: true }
];

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

console.log(activeUsers);

What to look for:

• filter() always returns a new array
• The original array stays unchanged
• Return true to keep an item
• Return false to remove it
• Great for reusable search and UI logic

Examples you can copy

Keep even numbers

const numbers = [1, 2, 3, 4, 5, 6];

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

Keep completed tasks

const tasks = [
  { title: "Write docs", done: true },
  { title: "Fix bug", done: false }
];

const completed = tasks.filter(task => task.done);

Remove empty strings

const names = ["Alex", "", "Mia", ""];

const cleanNames = names.filter(name => name !== "");

Common mistakes and how to fix them

Mistake 1: Forgetting to return the condition

What the reader might do:

const result = numbers.filter(num => {
  num > 3;
});

Why it breaks: the callback returns undefined, so no items stay in the result.

Corrected approach:

const result = numbers.filter(num => {
  return num > 3;
});

Or use the shorter implicit return form.

const result = numbers.filter(num => num > 3);

Mistake 2: Expecting the original array to change

What the reader might do:

numbers.filter(num => num > 3);
console.log(numbers);

Why it breaks: filter() does not mutate the original array.

Corrected approach:

const filtered = numbers.filter(num => num > 3);

Store the returned array.

Mistake 3: Using filter() for a single match

What the reader might do:

const firstMatch = users.filter(user => user.id === 1);

Why it breaks: the result is still an array, even if only one item matches.

Corrected approach:

const firstMatch = users.find(user => user.id === 1);

Troubleshooting

If the result is empty, check whether the callback actually returns true.

If the original array still has all items, remember filter() returns a new array.

If only one result is needed, switch to find().

If object filtering fails, verify the property names inside the callback.

Quick recap

• Use filter() to keep matching items
• It returns a new array
• The original array stays unchanged
• Return true to keep items
• Use find() when only one match is needed