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

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
filter().map()	1.3 Ops/sec
flatMap()	2.5 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 provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing two approaches for transforming an array: `flatMap()` vs `filter().map()`. The goal is to determine which approach performs better in terms of execution speed.

**Script Preparation Code**

The script preparation code creates a large array `arr` with 1 million elements, incrementing each element's value from 0 to 999,999 using a while loop. This creates a large dataset for the benchmark.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the browser will execute the script directly without rendering any UI-related overhead.

**Test Cases**

There are two test cases:

1. `filter().map()`
2. `flatMap()`

Both test cases use the same array `arr` and apply a transformation function to each element. The difference lies in how the elements are processed.

**Test Case 1: `filter().map()`**

This test case uses `filter()` to remove all elements that don't meet a certain condition (in this case, `x % 3 === 0`). Then, it applies a mapping function (`x => x / 100`) to the remaining elements.

**Test Case 2: `flatMap()`**

This test case uses `flatMap()` to flatten an array of arrays. In this case, the transformation function (`x => x % 3 ? x / 100 : []`) creates an array of two elements for each element in `arr`: one element with its original value and another empty element.

**Library/Functionality**

There are no external libraries or functionality being used beyond the built-in JavaScript Array methods (`filter()`, `map()`, and `flatMap()`).

**Special JS Features/Syntax**

There are no special JavaScript features or syntax being tested in this benchmark. It's a straightforward comparison of two array transformation approaches.

**Other Considerations**

When comparing these two approaches, consider the following:

* **Memory allocation**: When using `filter().map()`, an intermediate array is created to hold the filtered elements before mapping them. In contrast, `flatMap()` returns a new array directly.
* **Function call overhead**: The mapping function in both test cases has the same execution profile (i.e., performing arithmetic operations). However, the first element of each result array might have different sizes due to rounding or truncation.
* **Array creation overhead**: When comparing `filter().map()` vs `flatMap()`, consider that creating an intermediate array can add significant overhead.

**Alternative Approaches**

If you're interested in exploring alternative approaches, consider the following:

1. **Manual iteration**: Using a for loop with index variables instead of built-in Array methods.
2. **Array.prototype.forEach() and then spread operator (`...`)**: Applying `forEach()` to create an array from individual elements.
3. **Using `every()` and then using `map()` or `flatMap()`**: This approach involves removing unwanted elements first, and then applying the transformation.

Keep in mind that each of these alternatives might have different performance characteristics depending on the specific use case.

Related benchmarks:

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

flatMap vs filter map

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

Created: 2 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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