Benchmark: flatMap vs flat+map

Script Preparation code:

var arr = Array(10_000).fill(0)

Tests:

flatmap
arr.flatMap((x) => [x, x])
map+flat
arr.map((x) => [x, x]).flat()

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 77 runs

flatmap

4K/s

map+flat

3K/s

Fastest: flatmap (1.2x faster)

View exact numbers

✓ flatmap: 3,668 ops/sec
• map+flat: 3,182 ops/sec

Firefox 19 runs

flatmap

4K/s

map+flat

2K/s

Fastest: flatmap (1.5x faster)

View exact numbers

✓ flatmap: 3,576 ops/sec
• map+flat: 2,465 ops/sec

Safari 6 runs

flatmap

11K/s

map+flat

4K/s

Fastest: flatmap (2.8x faster)

View exact numbers

✓ flatmap: 11,415 ops/sec
• map+flat: 4,122 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatmap
map+flat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

flatmap

4K/s

map+flat

3K/s

View exact numbers

Test name	Executions per second
✓ flatmap	3,849 Ops/sec
map+flat	3,259 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON and explain the different approaches, pros and cons.

**Benchmark Definition**

The benchmark is comparing two approaches to flatten an array of arrays: `flatMap` vs `map + flat`. This means we're testing how efficient JavaScript engines perform these operations on a large array (`10,000` elements) in a loop.

**Script Preparation Code**

The script preparation code creates an array with 10,000 zeros using the `Array` constructor. This is done to ensure consistent input data for both test cases.

**Html Preparation Code**

There's no HTML preparation code provided, which means we can assume that any necessary setup or cleanup is handled by the JavaScript engine itself.

**Individual Test Cases**

We have two individual test cases:

1. **flatMap**: Tests the `flatMap` method on an array of arrays.
2. **map+flat**: Tests a combination of `map` and `flat` methods to achieve the same result as `flatMap`.

**Library Used**

Both `flatMap` and `map` methods are part of the Array prototype in JavaScript, which is why they're not explicitly mentioned as libraries.

**Special JS Feature or Syntax**

None of these test cases use special JavaScript features like async/await, generators, or functional programming constructs beyond basic array methods. They rely solely on standard JavaScript syntax.

**Pros and Cons of Approaches**

1. **flatMap**:
	* Pros: More readable and concise code.
	* Cons: May have performance overhead due to the explicit method call and potential extra function overhead.
2. **map+flat**:
	* Pros: Can be more efficient since it avoids the `flatMap` method call, reducing potential overhead.
	* Cons: Requires two additional method calls (`map` followed by `flat`) and can lead to slightly less readable code.

In general, `flatMap` is often preferred for its readability and simplicity. However, if performance is a concern, using `map+flat` might be a better choice.

**Alternative Approaches**

Other ways to flatten an array of arrays include:

* Using the spread operator (`[...array]`) or `Array.prototype.reduce()`.
* Utilizing libraries like Lodash (e.g., `_.flatten()`).

However, these alternatives may not always offer significant performance benefits over the built-in `flatMap` and `map+flat` methods.

**Benchmark Results**

The latest benchmark results show Firefox 131 performing better for `flatMap`, with an execution rate of 3586.893310546875 executions per second, compared to 2485.316162109375 for `map+flat`. This suggests that the built-in `flatMap` method might be optimized for performance in this specific scenario.

Keep in mind that benchmark results can vary depending on the JavaScript engine, hardware, and other factors. These results are likely a snapshot of a particular environment and may not reflect real-world performance differences.

flatMap vs flat+map (version: 0)

Comparing performance of: `flatmap vs map+flat`

Created: 3 years ago by: Registered User

Go to the latest result

flatmap

map+flat

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 77 runs

Firefox 19 runs

Safari 6 runs

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)

Comparing performance of: flatmap vs map+flat

Created: 3 years ago by: Registered User

Go to the latest result

flatmap

map+flat

Historical Performance Data aggregated from 102 community runs

Desktop Results:

Chrome 77 runs

Firefox 19 runs

Safari 6 runs

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: `flatmap vs map+flat`