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

Script Preparation code:

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

Tests:

filter map speed
arr.filter(x => x % 3).map(x => x/100)
flatMap speed
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 speed
flatMap speed

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark is designed to compare the performance of two different methods for transforming an array: `Array.prototype.filter()` followed by `Array.prototype.map()`, and `Array.prototype.flatMap()`. The goal is to determine which method is faster for this specific use case.

**Options Compared**

There are two options being compared:

1. **filter() + map()**: This approach involves filtering the array using `filter()`, then mapping each element to a new value using `map()`.
2. **flatMap()**: This approach uses the `flatMap()` method, which is a more recent addition to the ECMAScript standard (introduced in ES6). `flatMap()` combines the benefits of `filter()` and `map()` into a single method.

**Pros and Cons of Each Approach**

1. **filter() + map()**
	* Pros:
		+ Wide support across older browsers and environments.
		+ More intuitive for developers familiar with filtering and mapping arrays.
	* Cons:
		+ Requires two separate function calls, which can lead to performance overhead due to function call overhead.
2. **flatMap()**
	* Pros:
		+ Single method call, reducing function call overhead.
		+ Can be more efficient for large datasets, as it avoids the need for a separate filtering step.
	* Cons:
		+ Less intuitive for developers unfamiliar with `flatMap()` (introduced in ES6).
		+ Requires support for modern browsers and environments.

**Library Used**

In this benchmark, the library used is not explicitly mentioned. However, since both methods involve array operations, it can be inferred that the JavaScript engine being tested supports the ECMAScript standard.

**Special JS Feature or Syntax**

There are no special features or syntaxes being used in this benchmark. The focus is on comparing two existing methods for transforming arrays.

**Other Alternatives**

Alternative approaches to compare `filter()` + `map()` with `flatMap()` could include:

1. **Using other filtering methods**: Comparing the performance of `Array.prototype.filter()` vs. `Array.prototype.flatMap()`.
2. **Using other mapping methods**: Comparing the performance of `Array.prototype.map()` vs. `Array.prototype.flatMap()`.
3. **Comparing with native language implementations**: Comparing the performance of `filter()` + `map()` or `flatMap()` with equivalent operations in a native language, such as C++.

In this specific benchmark, the focus is on comparing the performance of two existing methods for transforming arrays, which makes it more focused and relevant to JavaScript developers.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
filter map speed	364.2 Ops/sec
flatMap speed	77.4 Ops/sec

Related benchmarks:

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

Comparing performance of: filter map speed vs flatMap speed

Created: 2 years ago by: Guest

Jump to the latest result

filter map speed

flatMap speed

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):