Benchmark: flatMap vs reduce (push)

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with push
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/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
reduce with push	71.4 Ops/sec
flatMap	20.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The test aims to compare the performance of two approaches: using `Array.prototype.reduce()` with `push` (method 1) versus using `Array.prototype.flatMap()` (method 2). Both methods are used to flatten an array of arrays into a single array.

**Method 1: Using `reduce()` with `push`**

This method uses the `reduce()` function to iterate over each inner array in the `data` array and push all its elements into a new accumulator array. The `push()` method is called repeatedly on the accumulator array, which can lead to poor performance due to the constant reallocation of memory.

**Pros:**

1. Simple to understand and implement.
2. Suitable for small datasets or when the number of inner arrays is known in advance.

**Cons:**

1. Poor performance due to repeated memory allocation and deallocation.
2. May not be suitable for large datasets or dynamic data structures.

**Method 2: Using `flatMap()`**

This method uses the `flatMap()` function, which was introduced in ECMAScript 2019 (ES2019), to flatten an array of arrays into a single array. `flatMap()` returns a new array with the result of applying the provided callback function to each element of the original array and then "flattening" the resulting arrays.

**Pros:**

1. Faster performance compared to using `reduce()` with `push`.
2. More concise and expressive code.
3. Suitable for large datasets or dynamic data structures.

**Cons:**

1. Requires ECMAScript 2019 support (ES2019+) for modern browsers.
2. May have slower performance in older browsers or environments that don't support ES2019+.

**Library and Special JS Features**

The test case uses the `Array.prototype.reduce()` method, which is a built-in JavaScript function. There are no external libraries required.

There are no special JavaScript features mentioned in the benchmark definition.

**Other Alternatives**

For flattening arrays of arrays, you can also use other approaches:

1. `forEach()` with `push()`: Similar to using `reduce()` with `push`, but uses a `forEach` loop instead.
2. Loops: Manual loops using `for...of` or `while` loops can be used to flatten an array of arrays.
3. Libraries like Lodash's `flatten()` function (not included in the test case).

Keep in mind that these alternatives may have different performance characteristics compared to using `flatMap()`.

Related benchmarks:

flatMap vs reduce (push) (version: 0)

Comparing performance of: reduce with push vs flatMap

Created: 2 years ago by: Guest

Jump to the latest result

reduce with push

flatMap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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