Benchmark: Benchmark: flatMap vs reduce vs foreach

Script Preparation code:

let e = () => ({
  eProp: 'E'
});

let t = () => ({
  tProp: 'T',
  entities: [1,2,3].map(() => e())
});

let g = () => ({
  gProp: 'B',
  tasks: [1,2,3,4,5,6,7,8,9].map(() => t())
});

let p = () => ({
  pProp: 'A',
  groups: [1,2,3,4,5,6].map(() => g())
});

var arr = [p(), p(), p()];

Tests:

flatMap
arr.flatMap(p => p.groups.flatMap(g => g.tasks.flatMap(t => t.entities)));
reduce
arr.reduce((prev, curr) => [ ...prev, ...curr.groups.reduce((gPrev, gCurr) => [ ...gPrev, ...gCurr.tasks.reduce((tPrev, tCurr) => [ ...tPrev, ...tCurr.entities ], []) ], []) ],[]);
foreach
let result = [] arr.forEach((p) => { p.groups.forEach((g) => { g.tasks.forEach((t) => { t.entities.forEach((e, i) => { result.push(e); }) }) }); });
for
let result2 = []; for (let i= 0; i< arr.length; i++) { for (let j= 0;j < arr[i].groups.length; j++) { for (let k= 0; k< arr[i].groups[j].tasks.length; k++) { for (let l= 0; l< arr[i].groups[j].tasks[k].entities.length; l++) { result2.push(arr[i].groups[j].tasks[k].entities[l]); } } } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce
foreach
for

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	60782.0 Ops/sec
reduce	12747.2 Ops/sec
foreach	219019.7 Ops/sec
for	109733.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to flatten an array of objects: `forEach`, `reduce`, and `flatMap`. The benchmark is designed to loop through every entity item in each object and add a property.

**Options Compared**

1. **forEach**: Uses the `forEach` method to iterate over the arrays, which applies the provided function to each element.
2. **reduce**: Uses the `reduce` method to accumulate an array of values from the elements of the inner arrays.
3. **flatMap**: Uses the `flatMap` method to flatten the array of objects into a single array.

**Pros and Cons**

*   **forEach**:
    *   Pros: Simple, easy to understand, and widely supported.
    *   Cons: Can be slower due to function call overhead and potential cache thrashing issues.
*   **reduce**:
    *   Pros: Efficient for large arrays, as it avoids the need to create intermediate arrays. The initial value of the accumulator can also help improve performance.
    *   Cons: More complex than `forEach` and may require more mental effort to understand and write.
*   **flatMap**:
    *   Pros: Similar to `reduce`, but with a more concise syntax and potentially better performance due to its internal implementation details. It avoids the need for an intermediate accumulator array, which can help reduce memory allocation and garbage collection overhead.
    *   Cons: May not be as widely supported or understood by developers without prior knowledge of its features.

**Other Considerations**

*   **Array.prototype.flatMap()**: This method is a relatively recent addition to JavaScript (introduced in ECMAScript 2019). Its implementation details are optimized for performance, which may make it faster than the `forEach` and `reduce` alternatives for large arrays.
*   **Browser Support**: The benchmark results are for Chrome 111 on Mac OS X 10.15.7, so the performance differences might vary depending on other browsers and platforms.

**Library Usage**

In this benchmark, there is no explicit library usage beyond the built-in JavaScript methods (`forEach`, `reduce`, and `flatMap`). However, if you're working with more complex data structures or libraries like Lodash, you may need to consider those as well when writing your own benchmarks.

**Special JS Features**

There are no special JavaScript features or syntaxes mentioned in this benchmark. The code uses standard ES6+ syntax, which should be widely supported across modern browsers and environments.

Overall, the choice of method depends on the specific requirements of your project, your team's familiarity with each approach, and potential performance considerations.

Related benchmarks:

Benchmark: flatMap vs reduce vs foreach (version: 0)

Loops through every entities item and adds a prop.

Comparing performance of: flatMap vs reduce vs foreach vs for

Created: 4 years ago by: Guest

Jump to the latest result

flatMap

reduce

foreach

for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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