Benchmark: flatMap vs filter + map

Script Preparation code:

var length = 1000000;
var arr = Array.from(Array(length).fill(0),(n, index)=>({date: Math.round(Math.random()*length), internalId: index }) );

Tests:

filter + map
const ids = arr.filter((item) => true).map(item => item.internalId);
flatMap
const ids = arr.flatMap((item) => item.date > 1 ? item.internalId : []);

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

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Linux

View result in a separate tab

Test name	Executions per second
filter + map	34.6 Ops/sec
flatMap	11.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided JSON benchmark.

**Benchmark Overview**

The benchmark is designed to compare two approaches: `filter` + `map` and `flatMap`. Both methods are used to extract the `internalId` property from an array of objects, but they differ in their implementation.

**Options Compared**

There are two main options being compared:

1. **Filter + Map**: This approach involves filtering out unwanted elements using `filter()` and then mapping over the remaining elements to extract the desired property using `map()`.
2. **FlatMap**: This is a more recent addition to JavaScript, introduced in ECMAScript 2019. It combines the functionality of both `filter` and `map` into a single method.

**Pros and Cons**

### Filter + Map

Pros:

* Wide support across older browsers (pre-ES6)
* Easy to understand for developers familiar with filtering and mapping
* Can be used as a fallback approach if flatMap is not supported

Cons:

* Requires two separate calls to `filter` and `map`, which can lead to additional overhead due to function call overhead and intermediate array creation.
* Less efficient than flatMap, especially for large datasets.

### FlatMap

Pros:

* More efficient than filter + map, as it avoids the need for intermediate arrays and function call overhead.
* Simpler syntax and more concise than filter + map.
* Wide support across modern browsers (post-ES6).

Cons:

* Requires support for ECMAScript 2019 or later.
* May be less familiar to developers without experience with flatMap.

**Library Usage**

There is no explicit library usage in the provided benchmark, as both `filter` and `flatMap` are built-in JavaScript methods. However, it's worth noting that some libraries (e.g., Lodash) may provide additional variants or optimizations for these operations.

**Special JS Feature/Syntax**

The benchmark uses a feature introduced in ECMAScript 2019: the spread operator (`...`) in the context of `flatMap`. This is used to expand the array into individual elements, allowing for more concise syntax. The use of this feature indicates that the benchmark is designed to take advantage of modern JavaScript features.

**Other Considerations**

* **Browser Support**: Both approaches are supported by most modern browsers, but older versions may not have flatMap support.
* **Dataset Size**: The larger the dataset, the more significant the impact of choosing between filter + map and flatMap. FlatMap is generally expected to perform better for large datasets.

**Alternatives**

If you need to compare other methods or optimize these operations further, consider exploring:

1. Using `reduce()` instead of `map` or `flatMap`.
2. Implementing a custom iterator or generator function.
3. Utilizing parallel processing libraries (e.g., Web Workers) for performance-critical workloads.

Keep in mind that the specific optimization approach will depend on your use case, dataset size, and target browser support.

Related benchmarks:

flatMap vs filter + map (version: 0)

Comparing performance of: filter + map vs flatMap

Created: one year 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 2 months ago):