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

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 : [])
map().filter(Boolean)
arr.map(x => x % 3 ? x/100 : false).filter(Boolean)
map().filter(=>)
arr.map(x => x % 3 ? x/100 : false).filter(x => undefined !== x)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()
map().filter(Boolean)
map().filter(=>)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 13) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 113 on Android

View result in a separate tab

Test name	Executions per second
filter().map()	154.4 Ops/sec
flatMap()	49.7 Ops/sec
map().filter(Boolean)	122.0 Ops/sec
map().filter(=>)	29.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark titled "flatMap() vs filter().map() vs map().filter()". The benchmark aims to compare the performance of three different approaches:

1. `flatMap()`: A method that flattens an array of arrays into a single array.
2. `filter().map()` : This approach first filters out elements using `filter()`, and then maps over the remaining elements using `map()`.
3. `map().filter()`: This approach first maps each element to a new value using `map()`, and then filters out falsy values using `filter()`.

**Script Preparation Code**

The script preparation code is provided as:

```javascript
var arr = [];
var i = 0;

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

This code creates an array `arr` with 100,000 elements, where each element is the loop counter `i`.

**Html Preparation Code**

The HTML preparation code is not provided. It's possible that it was used to prepare some additional context or setup for the benchmark.

**Test Cases**

There are four individual test cases:

1. `filter().map()`
2. `flatMap()`
3. `map().filter(Boolean)`
4. `map().filter(=>)`

Let's analyze each test case:

*   **`filter().map()`**: This approach filters out elements using `filter()` and then maps over the remaining elements using `map()`. The filtering condition uses the modulo operator (`x % 3`) to check if an element is divisible by 3. If it is, the element is mapped to its value divided by 100.
*   **`flatMap()`**: This approach flattens an array of arrays into a single array using `flatMap()`. In this case, the filtering condition is also based on `x % 3`, and the mapping operation multiplies the result by 100.
*   **`map().filter(Boolean)`**: This approach first maps each element to a new value using `map()`, where the mapping function uses the modulo operator (`x % 3`) to check if an element is divisible by 3. The resulting array contains only elements that are not falsy values. Then, `filter()` is used to filter out elements based on whether they are equal to their mapped value (which should always be true in this case). This approach effectively filters the same condition as `filter().map()`.
*   **`map().filter(=>)`**: This approach first maps each element to a new value using `map()` and then filters it out. However, the filter function used here is not a standard filter function and cannot be executed directly by JavaScript engines. Therefore, this test case might not be meaningful.

**Library: none**

None of these test cases rely on any external libraries.

**Special JS feature/syntax:**

*   The use of arrow functions (`=>`) in `map().filter(=>)` is a relatively recent addition to JavaScript (introduced in ECMAScript 2015). It's used here for functional programming, but its presence might affect the performance comparison due to differences in engine support.
*   The use of the modulo operator (`%`) is standard JavaScript syntax.

**Performance Considerations**

When comparing these approaches, consider the following factors:

*   **Array creation and manipulation**: `flatMap()` requires creating an intermediate array for flattening. This operation might incur additional overhead compared to `filter().map()`, which creates two separate arrays.
*   **Branch prediction**: The filtering condition in `filter().map()` and `map().filter(Boolean)` uses the modulo operator, which can be influenced by branch prediction. However, `flatMap()` likely avoids branching, reducing this impact.
*   **Function call overhead**: Each test case involves a series of function calls (`map()`, `filter()`, etc.). The number of these calls might affect performance due to overheads like stack frame creation and garbage collection.

**Alternatives**

Other approaches that could be used to compare are:

*   Using `forEach()` instead of `map()` or `flatMap()`
*   Using regular loops (`for` loops) instead of array methods
*   Incorporating other operations, such as sorting or reversing the array, into each test case

Related benchmarks:

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

flatMap vs filter map

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

Created: one year ago by: Registered User

Jump to the latest result

filter().map()

flatMap()

map().filter(Boolean)

map().filter(=>)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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