How To Use the filter() Array Method in JavaScript

Introduction

The javascript array filter method (array.prototype.filter) creates a new array containing only the elements that satisfy a provided test function. It's a fundamental tool in functional programming with JavaScript and commonly used when you need to filter array elements, including arrays of objects.

Prerequisites

• Basic knowledge of JavaScript arrays and how to iterate them.
• Familiarity with JavaScript functions and arrow function syntax.

How the filter() JavaScript method works

filter() accepts a callback (predicate) and returns a new array with items for which the callback returns a truthy value. The original array remains unchanged—filter() does not mutate the source array.

Callback signature (common parameters):

array.filter(function(element, index, array) {
  return /* boolean condition */;
});

// With arrow function
array.filter((element, index, array) => /* boolean condition */);

Parameters explained:

• element: current item in the array
• index: numeric position of the current item (optional)
• array: the original array being iterated (optional)

Keywords: javascript filter, array filter javascript, array.prototype.filter callback parameters.

Using filter() on an array of numbers

Example: return numbers greater than 7 using a concise arrow function.

const numbers = [1, 3, 6, 8, 11];
const greaterThanSeven = numbers.filter(n => n > 7);
console.log(greaterThanSeven); // [8, 11]

filter() javascript returns a new array with only the values that pass the test. Use this pattern for numeric filters such as "javascript filter numbers greater than example".

Using filter() on an array of objects

Commonly you will filter arrays of objects by a property value. Here is an example that finds all creatures with habitat equal to "Ocean".

const creatures = [
  { name: 'Shark', habitat: 'Ocean' },
  { name: 'Whale', habitat: 'Ocean' },
  { name: 'Lion', habitat: 'Savanna' },
  { name: 'Monkey', habitat: 'Jungle' }
];
const aquatic = creatures.filter(c => c.habitat === 'Ocean');
console.log(aquatic);
// [ { name: 'Shark', habitat: 'Ocean' }, { name: 'Whale', habitat: 'Ocean' } ]

This shows how to filter array of objects javascript by a key/value and is a typical use case: filter array of objects by key value.

Practical tips and patterns

• Return a new array: filter() return new array—useful for immutable patterns in functional programming JavaScript.
• Remove duplicates: combine filter with indexOf or a Set to deduplicate.

// Remove duplicates
const items = [1, 2, 2, 3, 3, 3];
const unique = items.filter((v, i, arr) => arr.indexOf(v) === i);
console.log(unique); // [1, 2, 3]

array.prototype.filter polyfill (simple)

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fn, thisArg) {
    if (typeof fn !== 'function') throw new TypeError(fn + ' is not a function');
    const res = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        const val = this[i];
        if (fn.call(thisArg, val, i, this)) res.push(val);
      }
    }
    return res;
  };
}

filter() vs find() vs map()

• filter(): returns an array of all matching elements.
• find(): returns the first matching element or undefined.
• map(): transforms every element and returns a new array of the same length.

Use filter when you need zero, one, or many items that meet a condition; use find when you expect a single match; use map to compute a new array of transformed values. This addresses the common question: javascript filter vs find vs map.

Further reading

For authoritative reference, see the MDN documentation on filter(): array.prototype.filter() and the filter method MDN page for details and browser compatibility.

Conclusion

The javascript array filter method is a versatile, non-mutating way to derive a subset from an array. Whether filtering numbers, filtering an array of objects by property, or composing filters with other array methods (map, reduce), filter() is an essential part of modern JavaScript array methods.