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

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => x % 3).map(x => x/100)
flatMap()
arr.flatMap(x => x % 3 ? x/100 : [])
mapFilter(Boolean)
arr.map(x => x % 3 && x/100).filter(Boolean)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	879.0 Ops/sec
flatMap()	983.8 Ops/sec
mapFilter(Boolean)	682.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.

**Benchmark Definition:**
The provided JSON represents a benchmark test comparing three approaches to process an array in JavaScript:

1. `filter()` followed by `map()`
2. `flatMap()`
3. `map()` followed by `filter(Boolean)`

This is often referred to as the "flatMap vs filter map" or "flatMap vs filter".map" comparison.

**Options Compared:**

* `flatMap()` vs `filter().map()`: Both methods are used to transform arrays, but `flatMap()` returns a new array with all sub-arrays concatenated, while `filter()` and `.map()` return an array of filtered elements.
* `mapFilter(Boolean)`: This is a variation of the previous approach where the filtering step is combined with the mapping step using the `Boolean` function. The idea is to filter out falsy values from the array before mapping.

**Pros and Cons:**

* **flatMap()**: Pros:
	+ More efficient than combining `filter()` and `.map()` because it avoids creating intermediate arrays.
	+ Can be faster for large arrays since it uses a single iteration.
*   Cons:
	+ May have higher memory overhead due to the creation of new arrays.

* **filter().map()**: Pros:
	+ Easier to understand and maintain, especially for developers who are not familiar with `flatMap()`.
	+ Can be faster in some cases because it avoids creating intermediate arrays.
*   Cons:
	+ More memory-intensive due to the creation of multiple intermediate arrays.

* **mapFilter(Boolean)**: Pros:
	+ Combination of mapping and filtering can lead to more efficient code.
	+ Avoids the need for an explicit `filter()` step, which can simplify the code.
*   Cons:
	+ May have lower performance compared to using separate `filter()` and `.map()` steps.

**Library Usage:**
None of the provided benchmarks use external libraries. The JavaScript standard library is used throughout.

**Special JS Features or Syntax:**
`flatMap()` is a modern JavaScript feature introduced in ECMAScript 2019 (ES11). It's designed to simplify the process of transforming arrays and combining multiple operations into one step.

**Other Alternatives:**

* For even more efficient processing, you can use `Array.prototype.reduce()` instead of `map()` or `flatMap()`.
* To further optimize performance, consider using Web Workers or parallelizing the execution on different cores.

Related benchmarks:

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

flatMap vs filter map

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

Created: 4 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

mapFilter(Boolean)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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