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); }

Historical Performance Data aggregated from 44 community runs

Desktop Results:

Chrome 34 runs

reduce with push

22K/s

loop with push

19K/s

flatMap

5K/s

Fastest: reduce with push (4.1x faster)

View exact numbers

✓ reduce with push: 21,836 ops/sec
• loop with push: 18,724 ops/sec
• flatMap: 5,379 ops/sec

Firefox 10 runs

loop with push

13K/s

reduce with push

13K/s

flatMap

5K/s

Fastest: loop with push (2.6x faster)

View exact numbers

✓ loop with push: 13,473 ops/sec
• reduce with push: 12,536 ops/sec
• flatMap: 5,210 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 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

loop with push

54K/s

reduce with push

30K/s

flatMap

8K/s

View exact numbers

Test name	Executions per second
✓ loop with push	53,808 Ops/sec
reduce with push	29,985 Ops/sec
flatMap	7,536 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!

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

Go to the latest result

flatMap

reduce with push

loop with push

Historical Performance Data aggregated from 44 community runs

Desktop Results:

Chrome 34 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

flatMap

reduce with push

loop with push

Historical Performance Data aggregated from 44 community runs

Desktop Results:

Chrome 34 runs

Firefox 10 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 with push vs loop with push`