filter() Array-Metode in JavaScript

Introduction

The JavaScript filter() method creates a new array containing only the elements that match a given condition. As a non-mutating, higher-order Array.prototype.filter function, it’s commonly used in functional programming to iterate arrays and build smaller arrays from larger ones.

Basic example

Here’s a simple example showing how to use filter() in JavaScript to keep numbers greater than 7. This demonstrates the ES6 array filter style with an arrow function and a classic ES5 function.

// ES6
const numbers = [1, 3, 6, 8, 11];
const lucky = numbers.filter(number => number > 7);
// lucky -> [8, 11]

// ES5
var nums = [1, 3, 6, 8, 11];
var result = nums.filter(function(number) {
  return number > 7;
});
// result -> [8, 11]

Syntax and callback parameters

The basic syntax is array.filter(callback[, thisArg]). The callback — often called the predicate or filter callback — receives three parameters: the current value, the current index, and the original array. The callback should return a boolean (true keeps the item, false excludes it).

array.filter(function(value, index, array) {
  // return true to keep value, false to drop it
}, thisArg);

Use the index parameter for position-based filtering, and thisArg when you need a specific this inside the callback. This explains common questions like “JavaScript filter() with index parameter” and “JavaScript filter() with thisArg example”.

Filtering an array of objects

filter() is very handy for filtering arrays of objects by property. Below is a common pattern for selecting items by a property value.

const heroes = [
  { name: 'Batman', franchise: 'DC' },
  { name: 'Ironman', franchise: 'Marvel' },
  { name: 'Thor', franchise: 'Marvel' },
  { name: 'Superman', franchise: 'DC' }
];

const marvelHeroes = heroes.filter(hero => hero.franchise === 'Marvel');
// marvelHeroes -> [{name: 'Ironman', franchise: 'Marvel'}, {name: 'Thor', franchise: 'Marvel'}]

This is a direct example of “JavaScript filter() with objects example” and “JavaScript filter array of objects by property”.

Common patterns

• Remove duplicates: Use filter with indexOf (or a Set for larger datasets) to return a unique array.

  const arr = [1, 2, 2, 3, 3, 3];
  const unique = arr.filter((v, i, a) => a.indexOf(v) === i);
  // unique -> [1, 2, 3]
  

• Filter truthy values: Quickly eliminate falsy values.

  const mixed = [0, 'hello', false, null, 42, ''];
  const truthy = mixed.filter(Boolean);
  // truthy -> ['hello', 42]
  

• Predicate returns true/false: Always return a boolean or value that coerces predictably to true/false so the filtered result matches expectations (JavaScript filter() return true false).

filter vs map vs reduce

filter returns a subset of the original array. map transforms every element and returns a new array of the same length. reduce aggregates values into a single result. Choosing between them depends on whether you need selection (filter), transformation (map), or accumulation (reduce) — a quick comparison for “JavaScript filter() vs map() vs reduce()”.

Behavior, compatibility and best practices

Key properties of the filter() method:

• It does not mutate the original array — it returns a new array (JavaScript filter() does not mutate array).
• Defined on Array.prototype (Array.prototype.filter).
• Available since ES5; arrow syntax is commonly used in ES6 (JavaScript filter() ES5 vs ES6).
• Polyfills exist for older environments (JavaScript filter() polyfill).

Quick tips

• Keep predicate functions small and readable.
• Avoid expensive operations inside the callback for large arrays; consider using a for loop or other optimizations if performance is critical.
• Use Set for faster duplicate removal on large datasets.

Further reading

For authoritative reference and edge cases, consult the MDN documentation on Array.prototype.filter and explore tutorials that compare array iteration methods in JavaScript.