Benchmark: flatMap() vs map().filter()

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;

Tests:

filter().map()
arr.map(x => x/100).filter(x => x % 3)
flatMap()
arr.flatMap(x => x % 3 ? x/100 : [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of two JavaScript methods: `map()` followed by `filter()`, and `flatMap()` alone. The benchmark uses an array `arr` that grows dynamically from 1 to 100,000 elements using a `while` loop.

**Options Compared**

Two approaches are being compared:

1. **`map().filter()`**: This approach applies the transformation function (in this case, dividing by 100 and checking for divisibility by 3) twice: first using `map()`, which returns a new array with transformed elements, and then using `filter()`, which returns an array containing only the filtered elements.
2. **`flatMap()`**: This approach applies the transformation function (same as above) directly to the original array, returning a single iterable sequence with transformed elements.

**Pros and Cons**

**`map().filter()`**:

Pros:

* Easy to understand and maintain
* Allows for debugging and testing individual components of the pipeline

Cons:

* Creates two separate arrays, leading to increased memory usage and slower performance
* May result in unnecessary filtering due to the sequential nature of array operations

**`flatMap()`**:

Pros:

* Returns a single iterable sequence, reducing memory overhead and improving performance
* Eliminates unnecessary filtering due to the direct transformation approach

Cons:

* Can be less intuitive for developers who are not familiar with the `flatMap()` method
* May lead to unexpected behavior if the transformation function is not properly designed

**Library Usage**

The benchmark uses no external libraries.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax being tested in this benchmark. The focus is solely on comparing the performance of these two approaches.

**Other Alternatives**

In addition to `map()` and `flatMap()`, other alternatives for transforming arrays could include:

* Using a library like Lodash's `map` and `filter` functions
* Implementing a custom iterative loop using indexing and array operations
* Using a streaming-based approach, where data is processed in real-time without storing it in memory

Keep in mind that the choice of approach depends on the specific requirements and constraints of the project.

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 95 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	97.7 Ops/sec
flatMap()	51.6 Ops/sec

Related benchmarks:

flatMap() vs map().filter() (version: 0)

flatMap vs filter map

Comparing performance of: filter().map() vs flatMap()

Created: 3 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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