Benchmark: Filtering and mapping with .filter(...).map(...) vs .flatMap(...) vs custom filterMap(...)

Script Preparation code:

var arr = new Array(100).fill(null).map((val, index) => index);

function filterMapEntries(
  arr,
  filterFn,
  mapFn,
) {
  const result = [];
  for (const [i, value] of arr.entries()) {
    if (filterFn(value)) {
      result.push(mapFn(value, i));
    }
  }
  return result;
}

function filterMapIndices(
  arr,
  filterFn,
  mapFn,
) {
  const result = [];
  for (let i = 0; i < arr.length; i += 1) {
    const value = arr[i];
    if (filterFn(value)) {
      result.push(mapFn(value, i));
    }
  }
  return result;
}

Tests:

.filter.map
const a = arr .filter((val) => val % 2 === 0) .map((val) => val + 10);
.flatMap
const a = arr.flatMap((val) => val % 2 === 0 ? [val + 10] : [])
filterMapEntries
const a = filterMapEntries(arr, (val) => val % 2 === 0, (val) => val + 10);
filterMapIndices
const a = filterMapIndices(arr, (val) => val % 2 === 0, (val) => val + 10);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.filter.map
.flatMap
filterMapEntries
filterMapIndices

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Browser/OS: Chrome 126 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.filter.map	3703176.2 Ops/sec
.flatMap	863757.2 Ops/sec
filterMapEntries	2748371.0 Ops/sec
filterMapIndices	5370223.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definitions and explain what is being tested, compared, and discussed.

**Benchmark Definition:**
The benchmark compares three approaches for filtering and mapping an array:

1. **`.filter().map()`**: Using the `filter` method to remove elements that don't meet a condition, followed by the `map` method to apply a transformation function to each remaining element.
2. **`.flatMap()`**: Using the `flatMap` method to combine arrays created by filtering and mapping elements in a single step.
3. **Custom `filterMapEntries()`** and **custom `filterMapIndices()` functions**: Two custom functions that implement the same logic as `.filter().map()` and `.flatMap()`, respectively, but with a different approach.

**Options Compared:**

*   The three approaches are compared in terms of performance (i.e., how fast they execute).
*   Each option has its own set of trade-offs:
    *   **`.filter().map()`**: Easy to understand and implement, but may involve overhead due to method calls.
    *   **`.flatMap()`**: More efficient than the first approach since it avoids method call overhead. However, some developers might find the syntax unfamiliar or less readable.
    *   **Custom `filterMapEntries()`** and **custom `filterMapIndices()` functions**: These offer a balance between readability and performance. They require more code than the built-in methods but can be optimized for specific use cases.

**Pros and Cons:**

*   **`.filter().map()`**:
    *   Pros: Easy to understand, widely supported.
    *   Cons: May have overhead due to method calls, potentially slower than other options.
*   **`.flatMap()`**:
    *   Pros: Efficient, often faster than `.filter().map()`.
    *   Cons: Unfamiliar syntax for some developers, may be less readable.
*   **Custom `filterMapEntries()`** and **custom `filterMapIndices()` functions**:
    *   Pros: Offer a balance between readability and performance, can be optimized for specific use cases.
    *   Cons: Require more code, may have higher learning curve.

**Library and Syntax Features:**

The benchmark uses JavaScript's built-in `Array.prototype.filter()`, `Array.prototype.map()`, and `Array.prototype.flatMap()` methods. These are standard library functions that provide a convenient way to manipulate arrays in most browsers and Node.js environments.

There are no special JavaScript features or syntax used beyond these standard library functions.

**Alternatives:**

Some developers might consider alternative approaches, such as:

*   Using `reduce()` instead of `filter().map()`: This can be more efficient for large datasets but may require additional code to handle edge cases.
*   Using `forEach()` with a callback function: This can be less efficient than the other options but provides more control over the iteration process.
*   Utilizing Web Workers or parallel processing libraries like `parallel-js` for performance-critical applications.

Keep in mind that these alternatives may not be suitable for all use cases and might require additional consideration of factors such as memory allocation, data synchronization, and thread safety.

Related benchmarks:

Filtering and mapping with .filter(...).map(...) vs .flatMap(...) vs custom filterMap(...) (version: 0)

Comparing performance of: .filter.map vs .flatMap vs filterMapEntries vs filterMapIndices

Created: 2 years ago by: Registered User

Jump to the latest result

.filter.map

.flatMap

filterMapEntries

filterMapIndices

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):