Benchmark: flatMap vs reduce vs loop filtering performance vs filter

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); }
Filtermap
arr.filter(o => o.assigned).map(o => 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
Filtermap

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

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

1. `flatMap`
2. `reduce` with a push statement
3. A loop using `push` inside a `for...of` loop
4. Filtering and mapping with `filter` and `map`

All tests involve an array of objects, where each object has two properties: `name` (a string) and `assigned` (a boolean). The `assigned` property is used to filter out objects.

**Library Used**

The benchmark uses the JavaScript `Array.prototype.flatMap`, `Array.prototype.reduce`, and `Array.prototype.filter` methods, as well as the `for...of` loop. No external libraries are required for this benchmark.

**Special JS Features/Syntax**

None of the test cases explicitly use any special JavaScript features or syntax that would require additional explanation.

**Benchmark Preparation Code**

The preparation code creates an array of 10,000 objects using `Array.from`, where each object has a unique `name` and a random `assigned` property (either true or false). This creates a large dataset for the benchmark.

**Test Cases Explanation**

Here's a brief overview of what's being tested in each test case:

1. **flatMap**: This method returns a new array with the elements of the original array transformed by mapping over it and filtering out objects where `assigned` is false.
2. **reduce with push**: This test uses the `reduce` method to iterate over the array, accumulating an array `a` with the `name` properties of the `assigned` objects. The `push` statement is used inside the callback function.
3. **loop with push**: Similar to the previous test, this loop iterates over the array using a `for...of` loop and pushes the `name` property onto an array `a` for each `assigned` object.
4. **Filtermap**: This test uses both `filter` and `map` methods to create a new array with only the objects where `assigned` is true, and then maps over that filtered array to get an array of `name` properties.

**Pros and Cons**

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

1. **flatMap**: Efficient, concise way to transform arrays with filtering.
	* Pros: Fast performance, easy to read.
	* Cons: Creates a new array, might be less readable for some developers.
2. **reduce with push**: Accumulates an array by pushing elements onto it.
	* Pros: Can be useful for aggregate operations or iterative processing.
	* Cons: Might lead to performance issues if the accumulator grows too large, can be confusing to read.
3. **loop with push**: Iterates over the array using a `for...of` loop and pushes elements onto an array.
	* Pros: Allows for more control over iteration and accumulation.
	* Cons: Can be slower than other methods due to the overhead of the loop, might lead to errors if not managed correctly.
4. **Filtermap**: Combines filtering and mapping into a single operation.
	* Pros: Can simplify complex operations and improve readability.
	* Cons: Creates multiple arrays (first filter, then map), might be slower than other methods.

**Alternatives**

Some alternative approaches that could have been tested include:

1. Using `filter` and `map` separately: `arr.filter(o => o.assigned).map(o => o.name)`
2. Using a more functional approach with `reduceRight` or `forEach`: `arr.reduceRight((a, o) => a.concat([o.name]), [])`
3. Using an iterative approach with a traditional loop and array indexing: `for (let i = 0; i < arr.length; i++) { if (arr[i].assigned) result.push(arr[i].name); }`

However, these alternatives would likely have similar performance characteristics to the original methods tested in this benchmark.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatMap	2404.1 Ops/sec
reduce with push	22659.1 Ops/sec
loop with push	30287.9 Ops/sec
Filtermap	20122.3 Ops/sec

Related benchmarks:

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

https://stackoverflow.com/a/77247681

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

Created: one year ago by: Guest

Jump to the latest result

flatMap

reduce with push

loop with push

Filtermap

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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