Benchmark: flatMap() vs filter().map() vs reduce() vs forEach()

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;

Tests:

filter().map()
arr.filter(x => x % 3).map(x => x/100)
flatMap()
arr.flatMap(x => x % 3 ? [x/100] : [])
reduce
arr.reduce((result, x) => { if (x % 3) result.push(x / 100); return result; }, [])
forEach
var result = []; arr.forEach(x => { if (x % 3) result.push(x / 100); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()
reduce
forEach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	561.1 Ops/sec
flatMap()	188.7 Ops/sec
reduce	752.3 Ops/sec
forEach	1154.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what is tested on MeasureThat.net for this benchmark.

**Benchmark Definition**

The benchmark tests four different approaches for combining filtering and mapping elements of an array: `filter().map()`, `flatMap()`, `reduce()`, and `forEach()`.

**Options Compared**

Here are the options being compared:

1. **Filtering**: Each option includes a filter to remove every third element from the array (i.e., elements where `x % 3 == 0`).
2. **Mapping**: After filtering, each option applies a mapping function to the remaining elements. The mapping functions transform the filtered elements by dividing them by 100.

**Pros and Cons**

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

1. **Filter().map()**:
	* Pros: Simple, intuitive, and widely supported.
	* Cons: May result in slower performance compared to `flatMap()` due to additional array creation and iteration.
2. **flatMap()**:
	* Pros: More efficient than `filter().map()` since it avoids creating an intermediate array and uses a single loop for both filtering and mapping.
	* Cons: Less intuitive, as the flatMap function combines filtering and mapping in a single step.
3. **reduce()**:
	* Pros: Can be more efficient than the other two options when used with an initial value, as it avoids creating an intermediate array.
	* Cons: May require additional initialization and can be less readable for simple cases like this one.
4. **forEach**:
	* Pros: Can be faster than `reduce()` since it uses a single loop and doesn't require an initial value.
	* Cons: Less intuitive, as it's primarily designed for side effects (e.g., pushing elements to an array), rather than accumulating results.

**Library and Special JS Feature**

None of the individual test cases use any external libraries or special JavaScript features beyond standard ES6+ syntax.

**Benchmark Preparation Code**

The preparation code generates a large array (`arr`) filled with integers from 0 to 100,000 (inclusive). This creates a scenario where filtering and mapping are applied to a substantial dataset.

**Interpretation of Benchmark Results**

According to the provided results, `forEach` performs best, followed closely by `flatMap()`. The order is reversed for `reduce()` and `filter().map()`, indicating that these latter approaches may incur additional overhead due to array creation and iteration.

Related benchmarks:

flatMap() vs filter().map() vs reduce() vs forEach() (version: 0)

Test four different approaches for a combination of filtering and mapping elements of an array.

Comparing performance of: filter().map() vs flatMap() vs reduce vs forEach

Created: 2 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

reduce

forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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