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: 9 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

foreach

219K/s

for

110K/s

flatMap

61K/s

reduce

13K/s

View exact numbers

Test name	Executions per second
✓ foreach	219,020 Ops/sec
for	109,734 Ops/sec
flatMap	60,782 Ops/sec
reduce	12,747 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.

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

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

Go 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):

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

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

Go 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):

Related benchmarks

Comparing performance of: `flatMap vs reduce vs foreach vs for`