filter(): Keeping What Matters

JavaScript ES2024 · ✓ verified by execution on 2026-08-12T16:30:47.465Z

Introduction

The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

filter() as a sieve: each element is tested by the predicate, the ones that fail are dropped, and the survivors form a new array — the original is untouched.

Basic Example

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
console.log(words.filter(word => word.length > 6));

Output

[ 'exuberant', 'destruction', 'present' ]

Your output

Truthy and Falsy

It should return a truthy value to keep the element in the resulting array, and a falsy value otherwise.

Predict the output javascript

Read the code. What exactly will it print? Commit to an answer before you look.

const mixed = [0, 1, false, 2, '', 3, null, 'a'];
console.log(mixed.filter(item => item));

Output

[ 1, 2, 3, 'a' ]

You predicted

What if nothing passes?

If no elements pass the test, an empty array is returned.

const nums = [1, 3, 5];
console.log(nums.filter(n => n % 2 === 0));

Output

[]

Your output

Sparse Arrays

callbackFn is invoked only for array indexes which have assigned values. It is not invoked for empty slots in sparse arrays.

const sparse = [1, , undefined];
console.log(sparse.filter(x => x === undefined));

Output

[ undefined ]

Your output

The Array Argument

The array argument is not the array that is being built — there is no way to access the array being built from the callback function.

const letters = ['a', 'b', 'c', 'b', 'a'];
console.log(letters.filter((item, index) => letters.indexOf(item) === index));

Misconceptions

Wrong Belief: filter() modifies the original array in place.
- Reality: filter() creates and returns a new shallow copy array; the original array is left unchanged.
Wrong Belief: filter() requires returning true or false explicitly.
- Reality: filter() coerces the return value to a boolean. Any truthy value keeps the element, and any falsy value drops it.
Wrong Belief: filter() will include empty slots from a sparse array.
- Reality: filter() skips empty slots entirely; they are never passed to the callback.
Wrong Belief: An arrow function with curly braces returns a value implicitly.
- Reality: If you use curly braces {} in an arrow function, you must explicitly use the ‘return’ keyword, otherwise it returns undefined (which is falsy, so all elements are dropped).

Edge Cases

Filtering an array where every element fails the test returns a new empty array [] rather than null or undefined.
When filtering an array of objects, the new array contains references to the same objects, not deep copies.

Check yourself

What does the filter() method return?

Reveal answer

A new array containing only elements that pass the test — filter() creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test.

Does filter() mutate the original array?

Reveal answer

No, it returns a new array — filter() is a non-mutating method that creates a shallow copy.

What happens if you use an arrow function with {} but forget the return statement in filter()?

Reveal answer

It returns undefined (falsy), so all elements are dropped — Arrow functions with block bodies {} require an explicit return statement. Without it, they return undefined, which is coerced to false.

Challenges

Challenge 1 +100 XP

Use `filter()` to return a new array containing only the even numbers from the `numbers` array.

Test 1 — expects "[ 10, 20, 30 ]"

Need a hint? (−25% XP)

An even number has a remainder of 0 when divided by 2 (n % 2 === 0).

Show solution (0 XP)

const numbers = [10, 15, 20, 25, 30];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);

🐞 Bug Hunt +100 XP

This code is supposed to filter out negative numbers, but it's returning everything. Fix the bug.

This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.

Test 1 — expects "[ 100, 200 ]"

Need a hint? (−25% XP)

Arrow functions with curly braces `{}` require an explicit `return` statement.

Show solution (0 XP)

const balances = [100, -50, 200, -10];
const positive = balances.filter(b => {
  return b > 0;
});
console.log(positive);