Benchmark: flatMap vs reduce vs filter.map v2

Script Preparation code:

var arr = Array.from({length: 20}, () => Math.floor(Math.random() * 100));;

Tests:

flatMap()
arr.flatMap((e) => e > 50 ? e / 2 : []);
reduce()
arr.reduce((acc, curr) => curr > 50 ? (acc.push(curr / 2), acc) : acc, []);
filter().map()
arr.filter((e) => e > 50).map((e) => e / 2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatMap()	3042833.5 Ops/sec
reduce()	9837571.0 Ops/sec
filter().map()	7063073.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided JSON represents a benchmarking test that compares three different approaches to process an array of random numbers:

1.  `flatMap()`
2.  `reduce()`
3.  `filter().map()` (composition of filter and map functions)

Each approach is designed to filter out elements greater than 50, perform some operation on the remaining elements, and return a new array.

**Benchmark Preparation Code**

The script preparation code generates an array of 20 random numbers between 0 and 100 using the `Array.from` method. This initialization step is crucial for fair comparisons across different approaches.

**Options Compared**

Here's a brief overview of each option:

1.  **`flatMap()`**: The `flatMap()` method returns a new array with the results of applying the provided function on every element in this array, without calling the `valueOf` method on that element. It also calls the provided function once for each element.
2.  **`reduce()`**: The `reduce()` method applies a binary function to all items in an array and reduces it to a single value. In this benchmark, it's used with a custom callback function to filter out elements greater than 50, push the result (i.e., dividing by 2) onto an accumulator array, and return the final array.
3.  **`filter().map()`**: This approach uses two separate methods: `filter()` removes all elements that don't meet the provided condition, while `map()` applies a given function to every element in the resulting array, effectively mapping each element greater than 50 to its half.

**Pros and Cons**

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

*   **`flatMap()`**: Pros: More efficient use of resources since it doesn't create intermediate arrays. Cons: May not be as readable or intuitive due to its concise syntax.
*   **`reduce()`**: Pros: Allows for more control over the processing pipeline and can be useful when working with complex data structures. Cons: Can be slower in some cases due to the overhead of binary operations.
*   **`filter().map()`**: Pros: More readable and easier to understand, especially for developers familiar with imperative programming. Cons: Creates intermediate arrays, which might lead to increased memory usage.

**Library Used (None)**

This benchmark does not rely on any external libraries. The built-in JavaScript methods (`Array.prototype.flatMap()`, `Array.prototype.reduce()`, and `Array.prototype.filter()` along with `Array.prototype.map()`) are used to implement each approach.

**Special JS Feature/ Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. It focuses on the inherent performance characteristics of different array processing methods.

**Other Alternatives**

For more comprehensive comparisons, you might consider exploring other approaches to array processing, such as:

*   Using `Array.prototype.forEach()` instead of `map()`
*   Implementing custom iteration using a `for...of` loop or a `while` loop
*   Utilizing `setInterval()` for time-based measurements

Keep in mind that the choice of approach depends on the specific use case and requirements.

Related benchmarks:

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

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

Created: one year ago by: Registered User

Jump to the latest result

flatMap()

reduce()

filter().map()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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