Benchmark: 20240726 - flatMap vs filter/map

Script Preparation code:

var arr = Array.from({ length: 1000 }).map((_, i) => i)

Tests:

flatMap
const res = arr.flatMap((n) => { if (n % 2 === 0) return [] return [n * 3] })
.map.filter
const res = arr .filter((n) => n % 2 !== 0) .map((n) => n * 3)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
.map.filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatMap	91013.8 Ops/sec
.map.filter	365636.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark measures the performance difference between using `flatMap` and combining `filter` and `map` in a sequence to process an array of numbers.

**Benchmark Definition**

The JSON definition contains two essential components:

1. **Script Preparation Code**: This code creates an array `arr` with 1000 elements, each mapped to its index `i`. The purpose of this setup is to provide a large dataset for the benchmark.
2. **Html Preparation Code**: This field is empty in the provided example, indicating that no additional HTML-related code needs to be executed before running the benchmark.

**Individual Test Cases**

There are two test cases:

1. **flatMap**: This case uses `flatMap` to process the array. The `flatMap` method applies a transformation to each element of the array and returns an array of results. In this example, it filters out even numbers by checking if the number is divisible by 2 (`n % 2 === 0`). If true, an empty array is returned; otherwise, the transformed number multiplied by 3 is returned.
2. **.map.filter**: This case uses a combination of `filter` and `map`. It first filters out odd numbers using `filter`, and then maps each remaining number to its tripled value.

**Performance Comparison**

The benchmark compares the performance of these two approaches on the prepared array `arr`. The results indicate that:

* **.map.filter**: This approach has a lower execution count per second (91013.7890625) compared to using `flatMap` (365636.25). However, this might be due to the overhead of calling `filter` and `map` sequentially.
* **flatMap**: Although the execution count is higher, it still outperforms the sequential approach in terms of throughput.

**Pros and Cons**

Here are some pros and cons for each approach:

* **.map.filter**:
	+ Pros: May be more efficient due to optimized algorithms or lower overhead.
	+ Cons: Requires two function calls, potentially introducing additional overhead.
* **flatMap**:
	+ Pros: Can be more concise and easier to read, as it combines multiple operations into one.
	+ Cons: May have higher overhead due to the transformation applied to each element.

**Other Considerations**

Keep in mind that:

* The performance difference might vary depending on the specific use case or array size.
* Other libraries or optimizations (e.g., `Array.prototype.map` with a custom callback) might affect the results.
* This benchmark focuses on pure JavaScript implementation; consider using native code or compiled languages for further optimization.

**Library and Special JS Features**

In this example, there is no specific library being used. However, some modern browsers support newer JavaScript features, such as:

* `flatMap` (introduced in ECMAScript 2019)
* `optional chaining` (`?.`)
* **Optional Chaining**: This feature allows you to access nested properties with a more concise syntax.

If you're interested in exploring alternative approaches or optimizing the provided benchmark, consider checking out MeasureThat.net's resources and tutorials for more information.

Related benchmarks:

20240726 - flatMap vs filter/map (version: 0)

Comparing performance of: flatMap vs .map.filter

Created: one year ago by: Guest

Jump to the latest result

flatMap

.map.filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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