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 : [])

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

flatMap speed

766/s

filter map speed

644/s

Fastest: flatMap speed (1.2x faster)

View exact numbers

✓ flatMap speed: 766 ops/sec
• filter map speed: 644 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

Run details: (Test run date: 28 days ago)

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

Browser/OS: Chrome 150 on Windows

View result in a separate tab

filter map speed

401/s

flatMap speed

279/s

View exact numbers

Test name	Executions per second
✓ filter map speed	401 Ops/sec
flatMap speed	279 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

Comparing performance of: `filter map speed vs flatMap speed`

Created: 4 years ago by: Guest

Go to the latest result

filter map speed

flatMap speed

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: filter map speed vs flatMap speed

Created: 4 years ago by: Guest

Go to the latest result

filter map speed

flatMap speed

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `filter map speed vs flatMap speed`