Benchmark: flatMap vs reduce vs loop filtering performance

Script Preparation code:

var arr = Array.from({length:10000}, (v, i) => ({name: i, assigned: Math.random() < 0.5}));

Tests:

flatMap
arr.flatMap((o) => (o.assigned ? [o.name] : []));
reduce with push
arr.reduce((a, o) => (o.assigned && a.push(o.name), a), [])
loop with push
{ const a = []; for (const o of arr) if (o.assigned) a.push(o.name); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce with push
loop with push

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; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

Test name	Executions per second
flatMap	5689.2 Ops/sec
reduce with push	14213.1 Ops/sec
loop with push	15166.5 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.

**Overview**

The benchmark is designed to compare the performance of three different approaches:

1. `flatMap`
2. `reduce with push`
3. `loop with push`

These approaches are used to filter an array of objects, where each object has a property called "assigned". The goal is to measure which approach is fastest.

**Library and Functionality**

The benchmark uses the `Array.prototype.flatMap` method, which was introduced in ECMAScript 2019 (ES10). The `flatMap` method returns a new array with the results of applying the provided function on each element of the original array. In this case, the function is `(o) => (o.assigned ? [o.name] : [])`, which filters out objects without the "assigned" property and returns an array of names.

The `reduce` method is also used, but with a twist: instead of using the accumulator to store the result, it uses the `push` method to append elements to an array. This approach creates a new array, whereas `flatMap` modifies the original array in place.

The third approach uses a simple loop with a conditional statement (`if (o.assigned)`) to filter out objects without the "assigned" property and push names to an array.

**Pros and Cons**

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

* `flatMap`:
	+ Pros: efficient, in-place modification, easy to read.
	+ Cons: may be slower for small arrays due to overhead of creating a new array.
* `reduce with push`:
	+ Pros: can be faster for large arrays since it only creates one array.
	+ Cons: modifies the original array, which might affect downstream logic; uses more memory.
* `loop with push`:
	+ Pros: easy to understand and modify.
	+ Cons: slower than `flatMap` due to loop overhead; less efficient than `reduce with push`.

**Other Considerations**

The benchmark measures the number of executions per second (ExecutionsPerSecond) for each approach, which provides a rough estimate of performance. Keep in mind that this metric is not necessarily representative of real-world scenarios.

**Alternatives**

If you were to rewrite these approaches using different JavaScript features or libraries, here are some alternatives:

* Instead of `flatMap`, you could use `filter` and then map:
```javascript
arr.filter(o => o.assigned).map(o => o.name)
```
* For `reduce with push`, you could use the `Array.prototype.concat` method to merge arrays:
```javascript
arr.reduce((acc, o) => acc.concat([o.name]), [])
```
These alternatives might have different performance characteristics depending on the specific use case.

I hope this explanation helps!

Related benchmarks:

flatMap vs reduce vs loop filtering performance (version: 0)

https://stackoverflow.com/a/77247681

Comparing performance of: flatMap vs reduce with push vs loop with push

Created: 2 years ago by: Guest

Jump to the latest result

flatMap

reduce with push

loop with push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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