Benchmark: flatMap vs reduce using push

Script Preparation code:

var arr = Array(10_000).fill({arr: [0,1]})

Tests:

reduce with concat
arr.reduce((acc, x) => {acc.push(x.arr); return acc}, [])
flatMap
arr.flatMap(x => x.arr)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with concat
flatMap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce with concat	10836.5 Ops/sec
flatMap	4128.2 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 world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition and Preparation Code**

The benchmark is comparing two approaches: `reduce` with `push` and `flatMap`. The preparation code creates an array `arr` with 10,000 elements, each containing a nested array `[0,1]`.

**Options Compared**

The two options being compared are:

1. **`reduce((acc, x) => {acc.push(x.arr); return acc}, [])`**: This approach uses the `reduce()` method to iterate over the array and push the values of the inner arrays into a new accumulator array.
2. **`arr.flatMap(x => x.arr)`**: This approach uses the `flatMap()` method to create a new array with the flattened elements of the inner arrays.

**Pros and Cons**

* **`reduce` with `push`**:
	+ Pros: More control over the iteration order, can be used with other methods.
	+ Cons: Can lead to slower performance due to the overhead of pushing elements onto an array.
* **`flatMap`**:
	+ Pros: Faster performance, creates a new array, and is more concise.
	+ Cons: Less control over the iteration order.

**Library and Purpose**

The `flatMap()` method uses the ECMAScript 2019 (ES2019) standard's `Array.prototype.flatMap()` method. This method returns a new array with the result of calling a provided callback function on every element in this array, passing the current element and an optional collection size as arguments.

**Special JS Feature or Syntax**

There is no special feature or syntax mentioned in the benchmark definition that requires specific knowledge to understand.

**Other Alternatives**

If you were to implement these approaches from scratch without using built-in methods like `reduce()` or `flatMap()`, you could use:

1. **Manual iteration with loops**: Use traditional JavaScript loops (e.g., `for` loops, `while` loops) to iterate over the array and build the result.
2. **Using other accumulator arrays**: Instead of using an array as the accumulator, consider using a different data structure like a `Set`, `Map`, or even a custom object.

Keep in mind that these alternatives would likely be less efficient than using built-in methods like `reduce()` or `flatMap()`.

Related benchmarks:

flatMap vs reduce using push (version: 0)

Comparing performance of: reduce with concat vs flatMap

Created: 4 years ago by: Guest

Jump to the latest result

reduce with concat

flatMap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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