JavaScriptArraysBeginner

Array.filter()

Creates a new array containing only elements that pass a test.

Review the syntaxStudy the examplesOpen the coding app
array.filter(predicateFn, thisArg?)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Creates a new array containing only elements that pass a test.

The Array.filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements that pass the test implemented by the provided predicateFn. It executes the callback once for each element in the array, excluding empty slots in sparse arrays. It has a time complexity of O(n), where n is the length of the array. It is a non-mutating method, meaning the original array remains unchanged. It is important to note that the callback must return a truthy value to include the element in the result; truthy coercion keeps unexpected values like 0 if the condition is not strictly defined (e.g., checking for the existence of an object property that might be 0).

Quick reference

Syntax

array.filter(predicateFn, thisArg?)

Inputs

Parameters

predicateFunction · Returns true to keep the element, false to remove it.
thisArg (optional)any · Value used as 'this' inside predicate.

See it in practice

Examples

1

Filtering an Array of Numbers

var numbers = [12, 5, 8, 130, 44];
var filtered = numbers.filter(function(value) {
  return value >= 10;
});
Output:
[12, 130, 44]

Returns a new array containing only the elements that are greater than or equal to 10.

2

Filtering Objects by Property Value

var users = [
  { id: 1, admin: true },
  { id: 2, admin: false },
  { id: 3, admin: true }
];
var admins = users.filter(function(user) {
  return user.admin;
});
Output:
[{ id: 1, admin: true }, { id: 3, admin: true }]

Creates a new array containing only user objects where the admin property is true.

3

Removing Null and Undefined Values

var data = [1, null, 2, undefined, 3];
var cleanData = data.filter(function(item) {
  return item !== null && item !== undefined;
});
Output:
[1, 2, 3]

Uses a strict comparison to remove null and undefined while preserving other values.

Debug faster

Common Errors

1

LogicError

Cause: Forgetting to return a value from the callback function, resulting in an implicit return of undefined (which is falsy).

Fix: Ensure the callback function contains a return statement that evaluates to true or false.

var items = [1, 2].filter(function(x) { x > 1; }); // Returns []
2

SideEffectError

Cause: Attempting to modify the original array or external state inside the filter predicate, which violates functional programming principles.

Fix: Keep the predicate function 'pure' and only return a boolean value based on the element comparison.

var arr = [1, 2];
var filtered = arr.filter(function(x) { arr.push(x); return x > 1; });

Runtime support

Compatibility

Node.js, BrowserAll modern browsers, IE9+ES5 (2009)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Creates a new array containing only elements that pass a test.

predicate: Returns true to keep the element, false to remove it. thisArg: Value used as 'this' inside predicate.

LogicError: Ensure the callback function contains a return statement that evaluates to true or false. SideEffectError: Keep the predicate function 'pure' and only return a boolean value based on the element comparison.