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

Script Preparation code:

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

Tests:

flat().map()
arr.flat().map(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
flat().map()
flatMap()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 143 on Windows

View result in a separate tab

flatMap()

518/s

flat().map()

257/s

View exact numbers

Test name	Executions per second
✓ flatMap()	518 Ops/sec
flat().map()	257 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 benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of two JavaScript methods: `flatMap()` and `flat().map()`. The goal is to determine which method is faster for a specific use case.

**Script Preparation Code**

The script preparation code generates an array `arr` with 100,000 elements, where each element is its index (i.e., `arr[i] = i`). This creates a long array that will be used in the benchmark.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark does not involve any additional overhead related to rendering or parsing HTML.

**Library and Special JavaScript Features**

Neither of the benchmark definitions uses any external libraries. However, it's worth noting that `flatMap()` was introduced in ECMAScript 2019 (ES2020) as a method on arrays. It replaces the previous `map().filter()` combination, which is what the alternative `flat().map()` implementation mimics.

**Options Compared**

The two methods being compared are:

1. **`flatMap()`**: This method returns a new array with the same elements as the original array, but with each element transformed by the provided function (in this case, `x => x % 3`). The `flatMap()` method short-circuits, meaning that it stops executing as soon as it encounters an element in the original array for which the transform function returns false. This can lead to better performance in cases where most elements need to be skipped.
2. **`flat().map()`**: This implementation first flattens the original array using `flat()`, and then applies the transformation using `map()`.

**Pros and Cons**

Here are some pros and cons of each approach:

* `flatMap()`:
	+ Pros:
		- Short-circuits, which can lead to better performance in cases where most elements need to be skipped.
		- More concise syntax.
	+ Cons:
		- Not all browsers support it yet (although the provided benchmark results show that Chrome 111 supports it).
* `flat().map()`:
	+ Pros:
		- More widely supported, as it only requires standard array methods.
	+ Cons:
		- Requires two method calls, which can lead to more overhead and slower performance.

**Other Considerations**

The benchmark does not take into account any other factors that could affect performance, such as:

* The size of the input array (100,000 elements in this case).
* The complexity of the transformation function (`x => x % 3`).
* Any potential side effects or memory allocations associated with each method.

**Alternative Approaches**

Some alternative approaches to compare would be:

* Using `Array.prototype.reduce()` instead of `flatMap()` and `flat().map()`.
* Using `forEach()` instead of both `flatMap()` and `flat().map()`.
* Using a different transformation function that takes advantage of modern JavaScript features, such as arrow functions or destructuring.

These alternative approaches would likely produce different results, but they would also depend on the specific requirements and constraints of the benchmark.

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

flatMap vs flat map

Comparing performance of: `flat().map() vs flatMap()`

Created: 3 years ago by: Registered User

Go to the latest result

flat().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):

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

flatMap vs flat map

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

Created: 3 years ago by: Registered User

Go to the latest result

flat().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):

Related benchmarks

Comparing performance of: `flat().map() vs flatMap()`