Benchmark: Recursive reduce vs recursive flatMap

Script Preparation code:

var arrayOfArrays = Array(10_000).fill([{ id: 1 }])

Tests:

flatMap
arrayOfArrays.flatMap((array) => array.flatMap((element) => element.id))
reduce
arrayOfArrays.reduce((result, array) => { const getAllSelectedFacetFilterIdsSelectedInHierarchy = ( listAcc, element ) => [...listAcc, element.id]; return [ ...result, ...array.reduce(getAllSelectedFacetFilterIdsSelectedInHierarchy, []), ]; }, [])

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

flatMap

2K/s

reduce

31/s

Fastest: flatMap (68.3x faster)

View exact numbers

✓ flatMap: 2,090 ops/sec
• reduce: 31 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 149 on Windows

View result in a separate tab

flatMap

2K/s

reduce

15/s

View exact numbers

Test name	Executions per second
✓ flatMap	1,972 Ops/sec
reduce	15 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 Definition**

The benchmark definition is a JSON object that represents the code to be executed by MeasureThat.net. The script preparation code defines an array of arrays with 10,000 elements, each containing an `id` property. This will serve as the input data for the benchmark.

The benchmark has two test cases:

1. **flatMap**: This test case executes the expression `arrayOfArrays.flatMap((array) => array.flatMap((element) => element.id))`. In essence, this code is flattening a 2D array of arrays into a single array by recursively calling the `flatMap` method.
2. **reduce**: This test case executes the expression `arrayOfArrays.reduce((result, array) => {\r\n  const getAllSelectedFacetFilterIdsSelectedInHierarchy = (\r\n    listAcc,\r\n    element\r\n  ) => [...listAcc, element.id];\r\n\r\n  return [\r\n    ...result,\r\n    ...array.reduce(getAllSelectedFacetFilterIdsSelectedInHierarchy, []),\r\n  ];\r\n}, [])`. This code is recursively reducing the input array by applying a function that accumulates the `id` values from each inner array.

**Options Compared**

The benchmark is comparing two different approaches to process the 2D array of arrays:

1. **flatMap**: This approach uses the `flatMap` method, which is designed for flattening arrays.
2. **reduce**: This approach uses the `reduce` method, which is designed for accumulating values in an array.

**Pros and Cons**

**flatMap**:
Pros:

* Designed specifically for flattening arrays
* Typically more efficient than using `reduce`
* Can be more readable for simple use cases

Cons:

* May not be suitable for complex aggregation or filtering tasks
* Limited control over the iteration order

**reduce**:
Pros:

* Highly flexible and versatile, allowing for custom aggregation and filtering logic
* Suitable for complex data processing tasks

Cons:

* Typically slower than `flatMap` due to the overhead of accumulating values in an array
* Can be less readable for simple use cases

**Other Considerations**

Both approaches have their strengths and weaknesses. For simple flattening tasks, `flatMap` is likely a better choice. However, for more complex data processing tasks, `reduce` offers greater flexibility and control.

**Library/Dependent Code**

The test case using `reduce` includes a nested function `getAllSelectedFacetFilterIdsSelectedInHierarchy`. This function appears to be a custom aggregation logic designed to extract `id` values from each inner array. Without more context, it's difficult to determine the purpose or origin of this function.

**Special JS Features/Syntax**

There is no apparent use of special JavaScript features or syntax in either test case. Both examples utilize standard ES6 syntax and built-in methods (`flatMap`, `reduce`) for their intended purposes.

**Alternatives**

If you're considering alternative approaches, some options might include:

1. **Using a library**: Consider leveraging existing libraries like Lodash or Ramda, which provide optimized implementations of `flatten`/`map` and `reduce` methods.
2. **Custom implementation**: If performance is critical, consider implementing the flattening logic using low-level array manipulation techniques (e.g., using `forEach`, `map`, and concatenation).
3. **Iteration-based approach**: If readability is crucial, consider using a simple iterative approach with loops to flatten the 2D array.

Keep in mind that each alternative will have its pros and cons, depending on your specific use case and performance requirements.

Recursive reduce vs recursive flatMap (version: 0) Benchmark.js

Comparing performance of: `flatMap vs reduce`

Created: 2 years ago by: Guest

Go to the latest result

flatMap

reduce

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Recursive reduce vs recursive flatMap (version: 0) Benchmark.js

Comparing performance of: flatMap vs reduce

Created: 2 years ago by: Guest

Go to the latest result

flatMap

reduce

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `flatMap vs reduce`