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 }, [])

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

filter().map()

25K/s

reduce()

15K/s

flatMap()

9K/s

Fastest: filter().map() (2.8x faster)

View exact numbers

✓ filter().map(): 24,502 ops/sec
• reduce(): 15,166 ops/sec
• flatMap(): 8,671 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

reduce()

9K/s

filter().map()

6K/s

flatMap()

4K/s

View exact numbers

Test name	Executions per second
✓ reduce()	8,874 Ops/sec
filter().map()	5,708 Ops/sec
flatMap()	4,180 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.

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

Go to the latest result

filter().map()

flatMap()

reduce()

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

filter().map()

flatMap()

reduce()

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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