W3cubDocs

/JavaScript

Iterator.prototype.filter()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The filter() method of Iterator instances returns a new iterator helper that yields only those elements of the iterator for which the provided callback function returns true.

Syntax

js
filter(callbackFn)

Parameters

callbackFn

A function to execute for each element produced by the iterator. It should return a truthy value to make the element yielded by the iterator helper, and a falsy value otherwise. The function is called with the following arguments:

element

The current element being processed.

index

The index of the current element being processed.

Return value

A new iterator helper. Each time the iterator helper's next() method is called, it returns the next element in the iterator for which the callback function returns true. When the underlying iterator is completed, the iterator helper is also completed (the next() method produces { value: undefined, done: true }).

Description

The main advantage of iterator helpers over array methods is their ability to work with infinite iterators. With infinite iterators, filter() allows you to iterate over only those elements that satisfy a given condition.

Examples

Using filter()

The following example creates an iterator that yields terms in the Fibonacci sequence, and then reads the first few terms that are even:

js
function* fibonacci() {
  let current = 1;
  let next = 1;
  while (true) {
    yield current;
    [current, next] = [next, current + next];
  }
}

const seq = fibonacci().filter((x) => x % 2 === 0);
console.log(seq.next().value); // 2
console.log(seq.next().value); // 8
console.log(seq.next().value); // 34

Using filter() with a for...of loop

filter() is most convenient when you are not hand-rolling the iterator. Because iterators are also iterable, you can iterate the returned helper with a for...of loop:

js
for (const n of fibonacci().filter((x) => x % 2 === 0)) {
  console.log(n);
  if (n > 30) {
    break;
  }
}

// Logs:
// 2
// 8
// 34

This is equivalent to:

js
for (const n of fibonacci()) {
  if (n % 2 !== 0) {
    continue;
  }
  console.log(n);
  if (n > 30) {
    break;
  }
}

Specifications

Browser compatibility

Desktop Mobile Server
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android Deno Node.js
filter 117 117 No 103 No 117 No 78 No No 117 No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/filter