Benchmark: flat vs flatMap vs reduce vs dumb

Script Preparation code:

var arr = Array(10_000).fill(Array(20).fill(Math.random()*50))

Tests:

reduce
arr.reduce((acc, val) => acc.concat(val), [])
flatMap
arr.flatMap(x => x)
flat
arr.flat()
dumb
arr.reduce((acc, val) => { if (val) { val.forEach((x) => acc.push(x)); } return acc; }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
flatMap
flat
dumb

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/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
reduce	0.3 Ops/sec
flatMap	36.6 Ops/sec
flat	37.0 Ops/sec
dumb	194.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition measures the performance of three different approaches for flattening an array: `flat`, `flatMap`, and `reduce`. Additionally, there's a "dumb" approach using a loop to concatenate arrays.

**Options Compared**

The three options being compared are:

1. **`flat()`**: This method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
2. **`flatMap(x => x)`**: This is an arrow function that applies `Array.prototype.map()` on each element of the original array, returning a new array with the results.
3. **`reduce((acc, val) => acc.concat(val), [])`**: This method reduces the array to a single value by iteratively concatenating arrays using the provided callback function.

**Pros and Cons of Each Approach**

1. **`flat()`**:
	* Pros: Simple, easy to read, and intuitive.
	* Cons: Can be slow due to recursive calls, may exceed maximum recursion depth for large arrays.
2. **`flatMap(x => x)`**:
	* Pros: Efficient by leveraging built-in `map()` functionality, avoids potential stack overflow issues.
	* Cons: May have higher memory usage compared to other approaches.
3. **`reduce((acc, val) => acc.concat(val), [])`**:
	* Pros: Can be more efficient than `flat()` for large arrays, as it doesn't create a new array recursively.
	* Cons: Less intuitive and harder to read due to the callback function.

**Library Used**

None of the provided approaches rely on any external libraries. They are built-in JavaScript methods or simple loops.

**Special JS Feature/Syntax**

The `flatMap()` method is a relatively new feature in JavaScript, introduced in ECMAScript 2019 (ES10). It's an array method that applies `Array.prototype.map()` to each element of the original array and returns a new array with the results. The provided benchmark tests its performance.

**Other Considerations**

* The "dumb" approach using a loop is included for comparison, but it may not be representative of real-world usage.
* Browser-specific differences in execution speed may affect the results.
* The number of iterations (10,000) and array depth (20) can impact the benchmark results.

**Alternatives**

If you're interested in exploring alternative approaches or libraries for array flattening, consider:

1. Using `Array.prototype.flat()` with an optional `depth` parameter to control recursion.
2. Leveraging third-party libraries like Lodash (`_flattenDeep()`) or Underscore (`_flatten()`) for more complex flattening scenarios.
3. Exploring alternative data structures, such as tuples or sets, which might offer different performance characteristics.

Keep in mind that the `flatMap()` method is a relatively new feature, and its adoption may vary across browsers and JavaScript engines.

Related benchmarks:

flat vs flatMap vs reduce vs dumb (version: 0)

Comparing performance of: reduce vs flatMap vs flat vs dumb

Created: 2 years ago by: Guest

Jump to the latest result

reduce

flatMap

flat

dumb

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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