Array filter method

JavaScriptMiddle~2 min read

The filter() method selects array elements by a condition and builds a new array out of the ones for which the condition returned true. It is one of the most useful array methods in JavaScript and, like map(), it never changes the source array.

Theory

TL;DR

filter() returns a new array with the elements that passed the test.
The condition is evaluated for every element: true keeps it, false drops it.
The source array is not mutated.
The result can be shorter than the source, or empty.
The callback receives element, index and array.
filter(Boolean) strips every falsy value.

Quick example

javascript

const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter(num => num % 2 === 0);

console.log(even);    // [2, 4, 6]
console.log(numbers); // [1, 2, 3, 4, 5, 6], the source array did not change

Syntax and callback parameters

javascript

const newArray = array.filter((element, index, array) => {
  return condition; // true keeps the element, false drops it
});

Argument	Description
`element`	The current array element
`index`	The index of the current element
`array`	The source array itself

The value returned by the callback is coerced to a boolean, so the condition does not have to be strictly true or false: any truthy value keeps the element in the result.

Example 1. Filtering numbers

javascript

const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter(num => num % 2 === 0);

console.log(even);    // [2, 4, 6]
console.log(numbers); // [1, 2, 3, 4, 5, 6]

filter() checks every element and, when the condition is true, adds it to the result.

Example 2. Filtering by an object property

javascript

const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 17 },
  { name: 'Maria', age: 30 }
];

const adults = users.filter(user => user.age >= 18);

console.log(adults);
// [
//   { name: 'Tim', age: 25 },
//   { name: 'Maria', age: 30 }
// ]

A common scenario is picking users, products or records that match a condition.

Example 3. Removing "empty" values

javascript

const values = [0, null, '', 'Hello', undefined, 42];
const truthy = values.filter(Boolean);

console.log(truthy); // ['Hello', 42]

Passing Boolean as the function automatically drops falsy values: 0, null, '', undefined, NaN, false.

When to reach for `filter()`

Goal	Is `filter()` a fit
Select elements by a condition	Yes
Transform values	No, use `map()`
Find a single element	No, use `find()`
Change the source array	No, `filter()` returns a new array

A formula worth remembering: arr.filter(condition) gives you a_new_subset_array.

The difference between `map()` and `filter()`

Method	What it does	Size of the new array
`map()`	Transforms every element	Always the same
`filter()`	Selects elements by a condition	Can be smaller

The two chain nicely: first select what you need with filter(), then reshape the selection with map().

Common mistakes

No return inside the curly braces. A block body of an arrow function returns nothing, so the condition is always undefined, which is falsy, and the result comes back empty:

javascript
const result = arr.filter(num => { num > 5 }); // []

The fix:

javascript
const result = arr.filter(num => num > 5); // or const result = arr.filter(num => { return num > 5; });
Trying to modify elements inside filter(). The method is meant for selection only, not for transformation; use map() when you need to change values.
Using filter() where find() belongs. If you need one element, filter() still scans the whole array and returns an array you then have to index with [0]; find() stops at the first match and returns the element itself.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.