filter

Learn to filter elements matching a condition with .filter.

The filter method

The filter method returns a new array with the elements that satisfy a condition. Items that fail the condition are skipped; the original array is again left untouched.

The syntax mirrors array.map(fn): array.filter(fn). Here fn is a predicate — a function that returns a boolean (true or false) for each element. Items for which it returns true stay in the result.

Example: [1, 2, 3, 4].filter(n => n > 2) returns [3, 4], because only 3 and 4 are greater than 2.

filter and predicate

The function passed to filter is called a predicate. It returns a boolean: true keeps the element, false drops it.

The predicate can use the element itself; for example, to keep adults from a list of ages you write ages.filter(age => age >= 18). The more complex the condition, the more readable the predicate should be.

If no element matches, filter returns an empty array — it does not return null or throw. You can rely on this.

Exercise Pick the expensive books

Define an array of prices [120, 45, 200, 80]. Use filter to build a new array with only the prices greater than 100, and print the result with console.log.

Show example solution

const prices = [120, 45, 200, 80];
const expensive = prices.filter(p => p > 100);
console.log(expensive);

Test yourself

Filter values above two

const nums = [1, 2, 3, 4];
const big = nums.filter(n => n ____ 2);

Show answer

const nums = [1, 2, 3, 4];
const big = nums.filter(n => n > 2);

What does filter return?
- true
- false
- A boolean
- A new array
Show answer

A new array — filter always returns a new array, not a boolean.
Match the filter parts

array.filter(fn)

Filtering call
fn

Predicate
true

Result that keeps the item
false

Result that drops the item

Next lesson: reduce

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies