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

Script Preparation code:

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

Tests:

map().filter()
arr.map(x => x/10).filter(x => x % 3)
flatMap()
arr.flatMap(x => { const next = x/100; return next % 3 ? [next] : []})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 98 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map().filter()	165.7 Ops/sec
flatMap()	52.5 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and test cases.

**Benchmark Definition**

The benchmark is called "flatMap() vs map().filter() v1". The description is "flatMap vs filter map", which suggests that we're comparing two different approaches to achieving the same result using JavaScript arrays.

**Script Preparation Code**

The script preparation code creates an array `arr` with 100,000 elements (from 0 to 1E5) and assigns each index a value equal to its own index plus one. This is done using a while loop.

**Individual Test Cases**

There are two test cases:

### **map().filter()**

* Benchmark Definition: `arr.map(x => x/10).filter(x => x % 3)`
* Test Name: "map().filter()"

This test case uses the `map()` method to transform each element of the array by dividing it by 10. The resulting array is then filtered using the `filter()` method, which keeps only the elements that have a remainder of 3 when divided by 3.

In other words:

1. Divide each element of the array by 10.
2. Keep only the elements whose result has a remainder of 3 when divided by 3.

### **flatMap()**

* Benchmark Definition: `arr.flatMap(x => { const next = x/100; return next % 3 ? [next] : []})`
* Test Name: "flatMap()"

This test case uses the `flatMap()` method to transform each element of the array. The transformation is done by dividing each element by 100, and if the result has a remainder of 3, it returns an array with that value as its only element.

In other words:

1. Divide each element of the array by 100.
2. If the result has a remainder of 3, return an array with that value as its only element.

**Latest Benchmark Result**

The latest benchmark result shows two test cases running on Chrome 98 (Desktop, Mac OS X 10.15.7). The results are:

* `map().filter()`: 165.71 executions per second
* `flatMap()`: 52.45 executions per second

This suggests that the `map().filter()` approach is significantly faster than the `flatMap()` approach.

**Library, Special JS Features, and Alternatives**

There is no library or special JavaScript feature being used in these test cases.

Alternative approaches could be:

1. Using a single `filter()` method to achieve the same result as `map().filter()`.
2. Using a different data structure (e.g., a Set) to reduce the number of elements processed.
3. Implementing a custom function to perform the transformation and filtering in one step.

Keep in mind that these alternatives might have their own performance characteristics, which would need to be measured and compared to the original test cases.

Related benchmarks:

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

flatMap vs filter map

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

Created: 2 years ago by: Guest

Jump to the latest result

map().filter()

flatMap()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):