The JavaScript array.filter() method

Q: What is the difference between filter() and find()?

filter() returns an array of every matching element; find() returns only the first matching element (or undefined). Use find() when you want a single item.

Q: How do I remove empty or falsy values from an array?

Use arr.filter(Boolean). Passing the Boolean function as the callback keeps only truthy values.

Q: What does filter() return if nothing matches?

An empty array ([]), never null or undefined, so you can safely chain more methods onto it.

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The filter() method creates a new array with only the elements that pass a test. Your callback returns true to keep an element or false to drop it: [1, 2, 3, 4].filter(n => n % 2 === 0) returns [2, 4]. Like map(), it leaves the original array alone.

Overview

filter() walks through an array and keeps only the elements your test approves of. The callback returns a truthy value to keep an item and a falsy one to throw it away, and you get back a new array of the survivors. Want only the in-stock products, only the comments from today, only the numbers above zero? That's filter.

The callback gets the same three arguments as map() — element, index and array — and whatever it returns is treated as a boolean. The result can be any length from zero up to the full original, depending on how many elements pass. If nothing passes, you get an empty array, never null or undefined, which makes it safe to chain.

People often mix it up with find(). The rule is simple: filter() gives you all the matches as an array; find() gives you the first match as a single value. If you only need one item, find() is faster and clearer; if you need every match, filter.

Syntax

const newArray = array.filter(callbackFn)
const newArray = array.filter(callbackFn, thisArg)

array.filter((element, index, array) => {
  return /* true to keep, false to drop */;
})

Parameters

The array.filter() method accepts the following parameters.

Parameter	Description
`callbackFn`	Test run for each element. Receives `(element, index, array)`; return a truthy value to keep the element.
`thisArg`	Optional. A value to use as `this` inside the callback.

Examples

Live example

<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const scores = [42, 88, 67, 95, 30];

  // keep only the passing scores (60 and up)
  const passed = scores.filter(score => score >= 60);

  document.getElementById('out').textContent =
    'passed: ' + passed.join(', '); // passed: 88, 67, 95
</script>

Example #2

Live example

<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const products = [
    { name: 'Pen',     inStock: true },
    { name: 'Notebook', inStock: false },
    { name: 'Eraser',  inStock: true }
  ];

  const available = products.filter(p => p.inStock);

  document.getElementById('out').textContent =
    available.map(p => p.name).join(', '); // Pen, Eraser
</script>

Best practices

Return a real boolean test from the callback — a clear condition reads better than relying on loose truthiness.
Use filter() for many matches and find() for a single one — don't filter() then take [0].
Remember the result can be empty; that's fine and still safe to chain with map().
To remove falsy values quickly, arr.filter(Boolean) drops 0, "", null, undefined and NaN in one go.

Frequently asked questions

What does filter() do in JavaScript?

It returns a new array containing only the elements for which your callback returns a truthy value. The original array is unchanged.

What is the difference between filter() and find()?

filter() returns an array of every matching element; find() returns only the first matching element (or undefined). Use find() when you want a single item.

How do I remove empty or falsy values from an array?

Use arr.filter(Boolean). Passing the Boolean function as the callback keeps only truthy values.

What does filter() return if nothing matches?

An empty array ([]), never null or undefined, so you can safely chain more methods onto it.

array.fill() array.find()

References