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

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => x % 2).map(x => x/100)
flatMap()
arr.flatMap(x => x % 2 ? x/100 : [])
reduce()
arr.reduce((newArray, x) => { if (x % 2) { newArray.push(x / 100) } return newArray }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Android 14; Mobile; rv:141.0) Gecko/141.0 Firefox/141.0

Browser/OS: Firefox Mobile 141 on Android

View result in a separate tab

Test name	Executions per second
filter().map()	5707.7 Ops/sec
flatMap()	4179.9 Ops/sec
reduce()	8874.2 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 and explain what's being tested, compared, and some pros/cons of each approach.

**Benchmark Overview**

The test compares the performance of three different methods to achieve a common goal:

1. `flatMap()`
2. `filter().map()`
3. `reduce()`

All tests are run on an array `arr` that is populated with values from 0 to 10,000 using a while loop.

**Library and Special JS Features**

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

**Test Case Breakdown**

Each test case compares two methods:

1. **`filter().map()`**
	* This is a common approach to achieve a transformation on an array while filtering out some elements.
	* Pros: Easy to understand, readable code, and suitable for small arrays or simple transformations.
	* Cons: Can be slower due to the overhead of calling `filter()` and `map()`, especially when dealing with large arrays.
2. **`flatMap()`**
	* This is a more modern approach that combines the benefits of `map()` and `filter()` in a single function.
	* Pros: Efficient, readable code, and suitable for most use cases where filtering and transformation are involved.
	* Cons: May be less familiar to older developers or those not well-versed with modern JavaScript features.
3. **`reduce()`**
	* This is a more functional approach that uses accumulation to transform an array.
	* Pros: Efficient, concise code, and suitable for reducing an array into a single value (e.g., sum, product).
	* Cons: May be less readable or familiar to developers not well-versed with functional programming concepts.

**Additional Considerations**

Other factors that may affect the performance of these tests include:

* Array size: The larger the array, the more significant the differences between these methods.
* Browser/Environment: Different browsers and environments might have varying levels of optimization for each method or use different implementations.
* Hardware Capabilities: CPU power, memory availability, and other hardware limitations can impact the performance.

**Alternatives**

If you need to optimize an existing implementation that uses one of these approaches, consider:

1. **Cache results**: If you know the result won't change, cache the intermediate values to avoid repeated filtering or mapping.
2. **Use parallel processing**: For large arrays, using Web Workers or other parallel processing techniques can significantly improve performance.
3. **Choose a different data structure**: Depending on your specific use case, switching from an array to a more efficient data structure like a Set or Map might be beneficial.

Keep in mind that the best approach depends on the specific requirements of your project and the characteristics of your data.

Related benchmarks:

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

flatMap vs filter map vs reduce()

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

Created: 3 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

reduce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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