Suggest an edit

Improve this article

Refine the answer for “Array filter method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

1. **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; });
   ```

2. **Trying to modify elements inside `filter()`.** The method is meant for selection only, not for transformation; use `map()` when you need to change values.

3. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts686 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.