Benchmark: flatMap vs reduce vs loop filtering vs filter/map 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); }
filter with a map
arr.filter(item => item.assigned).map(item => item.name)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatMap
reduce with push
loop with push
filter with a map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
flatMap	3408.4 Ops/sec
reduce with push	10756.0 Ops/sec
loop with push	10914.1 Ops/sec
filter with a map	5866.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Overview**

MeasureThat.net provides a platform for creating and running JavaScript microbenchmarks. The benchmark you've provided consists of four test cases: `flatMap`, `reduce with push`, `loop with push`, and `filter with a map`. These test cases are designed to compare the performance of different approaches in filtering and mapping arrays.

**Test Cases**

Let's analyze each test case:

1. **`flatMap`**: This test case uses the `Array.prototype.flatMap()` method, which flattens an array by mapping over it and returning a new array with the mapped values.
2. **`reduce with push`**: This test case uses the `Array.prototype.reduce()` method, which applies a reduction function to each element of an array (in this case, filtering out elements based on the presence of a specific property) and returns the accumulated result by pushing the filtered elements into an accumulator array.
3. **`loop with push`**: This test case uses a traditional `for...of` loop with a conditional statement to filter out elements based on their presence in the `assigned` property, and pushes the matching elements into an accumulator array.
4. **`filter with a map`**: This test case uses the `Array.prototype.filter()` method to filter out elements based on their presence in the `assigned` property, and then applies another mapping function (`map()`) to extract the `name` property from each filtered element.

**Options Compared**

The main options compared in these test cases are:

* **Flattening vs mapping**: `flatMap` flattens an array by mapping over it, while `filter with a map` maps over an already flattened array.
* **Reducing vs pushing**: `reduce with push` uses a reduction function to accumulate the filtered elements into an accumulator array, whereas `loop with push` pushes the filtered elements directly into an accumulator array.

**Pros and Cons**

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

1. **Flattening (flatMap)**:
	* Pros: Can simplify some logic by avoiding nested loops.
	* Cons: Might incur additional overhead due to function calls and mapping operations.
2. **Reducing (reduce with push)**:
	* Pros: Accumulates elements efficiently using a single pass, reducing memory allocations.
	* Cons: Requires an accumulator array, which can lead to performance issues if not managed carefully.
3. **Looping (loop with push)**:
	* Pros: Can be faster for small arrays or when working with specific requirements that require more control.
	* Cons: Involves additional overhead due to conditional statements and loop iterations.
4. **Filtering and mapping (filter with a map)**:
	* Pros: Separates filtering from mapping concerns, making it easier to reason about the code.
	* Cons: May incur additional overhead due to function calls and array operations.

**Library Usage**

There is no explicit library usage in these test cases, as they rely solely on built-in JavaScript methods (e.g., `Array.prototype.flatMap()`, `Array.prototype.reduce()`, etc.).

**Special JS Features/Syntax**

None of the test cases explicitly utilize any special JavaScript features or syntax beyond the standard array methods mentioned above.

Now that we've analyzed the benchmark, let's discuss **alternatives**:

* **Other filtering and mapping approaches**: Besides the ones mentioned in the benchmark, there are other ways to filter and map arrays, such as using `Array.prototype.filter()` and then applying a custom function or method (e.g., `map()`, `forEach()`, etc.).
* **Native array methods**: The benchmark uses built-in array methods, but other native methods like `Set` or `Map` could be used for filtering and mapping operations.
* **Library-based approaches**: Depending on the specific use case, libraries like Lodash, Ramda, or others might offer optimized implementations of filtering and mapping functions.

Keep in mind that benchmarking JavaScript performance can be complex and influenced by many factors. This analysis provides a general understanding of the test cases but may not cover all possible scenarios or edge cases.

Related benchmarks:

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

Comparing performance of: flatMap vs reduce with push vs loop with push vs filter with a map

Created: one year ago by: Guest

Jump to the latest result

flatMap

reduce with push

loop with push

filter with a map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):