JavaScript Array filter() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Array
Decorative image with the word FILTER

Definition

Array.prototype.filter(callback) builds a new array with only the elements that pass your test. Truthy callback → keep; falsy → skip. The original array is not mutated (ES5).

Remember
array.filter((element, index, array) => test)

keep when callback is truthy
returns a new array (maybe empty [])
does not transform values — use map for that
find() → first match only; filter() → all matches

Syntax

Call array.filter. Start with this line.

JavaScript
array.filter(callback, thisArg?)
CallWhat it does
array.filter(callback, thisArg?)Primary signature.
array.filter(...)Call with the arguments your case needs.

Built into JavaScript. Call filter(...) on an array instance — no import required.

Library declarations
JavaScript
array.filter(callback, thisArg?)

Parameters

ParameterDescription
callbackRequired. Test function; truthy → keep
index, arrayOptional. Extra callback args when needed
thisArgOptional. Value for this inside callback

Return Value

Return ValueDescription
*New array of kept elements

JavaScript Examples

Example 1 — Keep Even Numbers

Return a new array of values divisible by 2; leave the source alone.

JavaScript
const numbers = [1, 5, 10, 15, 20];
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers);  // [10, 20]
console.log(numbers);      // [1, 5, 10, 15, 20]
Try It Yourself

How It Works

  1. Start with five numbers. Odds and evens mixed together.
  2. Test each value. num % 2 === 0 is true only for evens.
  3. Build a new array. 10 and 20 are pushed into the result.
  4. Source stays put. numbers is unchanged after filter.

Example 2 — Values Greater Than 10

Keep only numbers strictly above a threshold.

JavaScript
const numbers = [1, 5, 10, 15, 20];
const aboveTen = numbers.filter((num) => num > 10);

console.log(aboveTen);  // [15, 20]
Try It Yourself

How It Works

  1. Set the rule. Keep when num > 10.
  2. Boundary check. 10 fails (>, not >=).
  3. Keep two values. 15 and 20 pass.
  4. Order preserved. Kept items stay in original order.

Example 3 — Filter an Array of Objects

Select students whose grade is above 80.

JavaScript
const students = [
  { name: "Alice", grade: 85 },

  { name: "Bob", grade: 92 },

  { name: "Charlie", grade: 78 }
];

const highPerformers = students.filter((student) => student.grade > 80);

console.log(highPerformers);
Try It Yourself

How It Works

  1. Objects as elements. Each item has name and grade.
  2. Read a property. The callback checks student.grade > 80.
  3. Alice and Bob pass. Charlie’s 78 is filtered out.
  4. Same object references. Kept objects are the originals—not deep clones.
Compatibility

Browser & Runtime Support

Array.prototype.filter() is part of ES5 (2009). It is available in every modern browser, Node.js, and Internet Explorer 9+.

✓ Baseline · ES5

Array.prototype.filter()

Supported in Chrome, Firefox, Safari, Edge, Node.js, and IE9+. No polyfill needed for modern projects.

99% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Bun Supported · JavaScript runtime
Supported
Deno Supported · JavaScript runtime
Supported
Node.js Supported · Server runtime
Supported
Android WebView Supported · Modern WebView
Full support
Array.filter() Excellent

Bottom line: Safe everywhere you are likely to ship. Only ancient IE8 environments lack native filter.

Frequently Asked Questions

filter() creates a new array containing only elements for which the callback returns a truthy value. Elements that fail the test are skipped.
No. filter() always returns a new array. The source array is left unchanged unless your callback deliberately mutates it (which you should avoid).
It returns an empty array [], not null or undefined.
filter() returns all matching elements in a new array. find() returns only the first matching element (or undefined if none match).
filter() only selects elements—it does not change them. Use map() when you need to transform each item. A common pattern is filter().map() chained together.
filter() has been available since ES5 (2009). It works in all modern browsers, Node.js, and Internet Explorer 9+.

Next: find()

Return the first element that passes your test—or undefined.

find() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Array fill() Method JavaScript Array find() Method