Benchmark: flatMap vs reduce-push vs flat

Script Preparation code:

var data = [];
for (let i = 0; i < 100000; i++) {
   data[i] = Array(10).fill(0);
}

Tests:

reduce with push
data.reduce((acc, x) => { acc.push(...x); return acc; }, []);
flatMap
data.flatMap(x => x);
flat
data.flat(Infinity);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with push
flatMap
flat

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark, titled "flatMap vs reduce-push vs flat", aims to compare the performance of three different approaches:

1. `Array.prototype.flatMap()`
2. Using `Array.prototype.reduce()` with an accumulator array and pushing elements onto it
3. Using `Array.prototype.flat()` (with a specified depth)

These approaches are used to process a large array (`data`) that contains 100,000 arrays of length 10, each filled with zeros.

**Approach Comparison**

### 1. `Array.prototype.flatMap()`

This method flattens the array by recursively iterating over its elements and returning an array with the same elements. The main advantage is that it's a concise way to perform this operation. However, for large arrays or deep structures, it can be less efficient due to recursion overhead.

Pros:

* Concise code
* Easy to read

Cons:

* Can be slower due to recursive function calls
* May not work well with very deep structures

### 2. `Array.prototype.reduce()` with pushing elements onto an accumulator array

This method uses a reducer function to iterate over the array, accumulating the result in an array. The main advantage is that it can handle any type of iteration and accumulation logic.

Pros:

* Flexible and customizable
* Can be faster for large arrays due to batch processing

Cons:

* Requires more code than `flatMap()`
* May require manual memory management (e.g., for avoiding unnecessary copies)

### 3. `Array.prototype.flat()` (with a specified depth)

This method is similar to `flatMap()`, but with an added optimization for deep arrays. The main advantage is that it's faster and uses less memory.

Pros:

* Optimized for large, deeply nested arrays
* Uses less memory than `reduce()` with pushing

Cons:

* Requires knowing the maximum allowed depth (Infinity in this case)
* May not work well for very shallow or flat arrays

**Library: none**

There are no external libraries used in these benchmark cases.

**Special JavaScript features: none**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Benchmark Preparation Code Explanation**

The `Script Preparation Code` section initializes an empty array `data` with 100,000 elements, each containing 10 zero-filled arrays. This data structure is used to test the performance of the three different approaches.

The `Html Preparation Code` field is blank, suggesting that no HTML-related code or setup is needed for this benchmark.

**Test Case Explanation**

Each test case defines a single benchmark:

1. `reduce with push`: Uses `Array.prototype.reduce()` with an accumulator array and pushes elements onto it.
2. `flatMap`: Uses `Array.prototype.flatMap()`.
3. `flat`: Uses `Array.prototype.flat()` (with a specified depth of Infinity).

The `Benchmark Definition` JSON provides the actual code that will be executed for each test case.

**Latest Benchmark Result Explanation**

The provided benchmark result shows the performance data for each test case:

* `ExecutionsPerSecond`: The average number of iterations performed per second on the target device (in this case, a Chrome 120 browser running on a Windows desktop).
* `RawUAString`, `Browser`, `DevicePlatform`, and `OperatingSystem` provide metadata about the testing environment.

The results show that:

* `flatMap()` is faster than using `reduce() with push`
* `flat()` is faster than both `flatMap()` and `using reduce() with push`

Keep in mind that these results may vary depending on the specific device, browser, or environment used to run the benchmark.

Latest run results:

Run details: (Test run date: 14 days ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
reduce with push	33.5 Ops/sec
flatMap	23.2 Ops/sec
flat	19.3 Ops/sec

Related benchmarks:

flatMap vs reduce-push vs flat (version: 0)

Compare flatMap performance vs Array.reduce with Array.push

Comparing performance of: reduce with push vs flatMap vs flat

Created: 9 months ago by: Registered User

Jump to the latest result

reduce with push

flatMap

flat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):