Benchmark: flatMap vs reduce, but without copying the array in each iteration

Script Preparation code:

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

Tests:

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

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: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:124.0) Gecko/20100101 Firefox/124.0

Browser/OS: Firefox 124 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
reduce with concat	5664.4 Ops/sec
flatMap	4488.0 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's being tested.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches to process an array of numbers:

1. `reduce` with concatenation (`arr.reduce((acc, x) => {acc.push(x, x); return acc}, [])`)
2. `flatMap`

**Options Compared**

In this benchmark, we're comparing the performance of two different methods to achieve a similar result:

* `reduce`: A method that applies a reduction function (in this case, concatenating each element with itself) to an array, accumulating the results in an accumulator.
* `flatMap`: A method that flattens an array of arrays into a single array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **reduce**: Pros:
	+ More intuitive and familiar for many developers
	+ Can be more memory-efficient if used correctly
* Cons:
	+ Requires creating a new accumulator array, which can lead to performance issues if not done efficiently
* `flatMap`: Pros:
	+ More concise and expressive than using `reduce` with concatenation
	+ Can be faster in some cases due to fewer allocations
* Cons:
	+ Less intuitive for some developers, especially those without experience with functional programming
	+ May require more memory allocation if not used correctly

**Library/Functionality Used**

In this benchmark, we're using the following libraries/functions:

* `Array.prototype.reduce()`: A built-in JavaScript method that applies a reduction function to an array.
* `Array.prototype.flatMap()`: A built-in JavaScript method (introduced in ECMAScript 2019) that flattens an array of arrays into a single array.

**Special JS Feature/Syntax**

In this benchmark, we're using the `flatMap` method, which is a relatively new feature introduced in ECMAScript 2019. This allows for concise and expressive array processing without requiring explicit looping or memory allocations.

**Other Alternatives**

If you don't have access to modern browsers that support `flatMap`, you can still achieve similar results using other methods, such as:

* Using `map` followed by `concat`
* Using a custom loop with an accumulator
* Using a library like Lodash's `flatten`

However, these alternatives may not be as concise or efficient as the original `flatMap` approach.

Related benchmarks:

flatMap vs reduce, but without copying the array in each iteration (version: 0)

Comparing performance of: reduce with concat vs flatMap

Created: 2 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):