Benchmark: flatMap vs reduce 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), [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce with push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
flatMap	7088.8 Ops/sec
reduce with push	26512.4 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 provided benchmark definition and analyze what's being tested.

**What is tested?**

The benchmark compares the performance of two approaches to filter an array in JavaScript:

1. `arr.flatMap((o) => (o.assigned ? [o.name] : []));` - This uses the `flatMap()` method, which flattens an array of arrays into a single array.
2. `arr.reduce((a, o) => (o.assigned && a.push(o.name), a), [])` - This uses the `reduce()` method with a callback function that filters and pushes elements to the accumulator array.

**Options compared**

The benchmark compares two approaches:

* **flatMap**: Uses `flatMap()` to filter and flatten the array.
* **Reduce with push**: Uses `reduce()` with a callback function that filters and pushes elements to the accumulator array.

**Pros and cons of each approach:**

* **flatMap**:
	+ Pros:
		- More concise and readable code.
		- Can be faster in some cases, as it avoids the overhead of the `reduce()` method.
	+ Cons:
		- May not work correctly if the input array is empty or contains only null/undefined values.
		- May be slower than `reduce` for very large arrays, due to the additional overhead of flattening the array.
* **Reduce with push**:
	+ Pros:
		- Works correctly even if the input array is empty or contains only null/undefined values.
		- Can be faster for very large arrays, as it avoids the overhead of flattening the array.
	+ Cons:
		- More verbose code compared to `flatMap`.
		- May have performance implications due to the push operation.

**Library and its purpose**

Neither of these approaches uses a specific library. They are built-in JavaScript methods that manipulate arrays.

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other alternatives**

For filtering arrays, other alternatives include:

* Using `Array.prototype.filter()`:
```javascript
arr.filter((o) => o.assigned).map((o) => o.name);
```
This approach is similar to the `flatMap` method but uses two separate methods instead of one.
* Using a loop:
```javascript
const result = [];
for (const o of arr) {
  if (o.assigned) {
    result.push(o.name);
  }
}
```
This approach is more explicit and verbose than both `flatMap` and `reduce with push`, but can be useful for understanding the inner workings of array manipulation.

Keep in mind that performance differences between these approaches may not be significant for small arrays, but can become noticeable for very large datasets.

Related benchmarks:

flatMap vs reduce filtering performance (version: 0)

Comparing performance of: flatMap vs reduce with push

Created: 2 years ago by: Guest

Jump to the latest result

flatMap

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