Benchmark: flatMap() vs filter().map() vs reduce() vs forOf loop 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 }, [])
forof loop
newArray = []; for (x of arr){ if (x % 2) { newArray.push(x / 100) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 28 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
filter().map()	25788.3 Ops/sec
flatMap()	9153.4 Ops/sec
reduce()	15673.1 Ops/sec
forof loop	1284.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 28 days ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests the performance of various JavaScript methods for processing arrays, specifically for filtering and transforming the values of an array. The comparison includes the following approaches:

1. **`filter().map()`**
   - **Benchmark Definition**: `arr.filter(x => x % 2).map(x => x/100)`
   - **Description**: This approach first filters the array for odd numbers (`x % 2` returns true for odd numbers) and then applies a transformation by dividing each selected number by 100.
   - **Pros**: This method is straightforward and readable; it clearly separates the filtering and transformation steps, making it easy to understand.
   - **Cons**: It may incur overhead due to creating intermediate arrays for both the `filter` and `map` methods, leading to increased memory usage.

2. **`flatMap()`**
   - **Benchmark Definition**: `arr.flatMap(x => x % 2 ? x/100 : [])`
   - **Description**: This method combines mapping and flattening in a single call, allowing transformation of array elements while simultaneously eliminating those not meeting the criteria (in this case, even numbers).
   - **Pros**: Potentially more efficient than `filter().map()`, as it avoids creating an intermediate array and directly accumulates results into a single array while performing the transformation.
   - **Cons**: It might be less familiar to developers who are not accustomed to the `flatMap` function, potentially impacting code readability.

3. **`reduce()`**
   - **Benchmark Definition**: `arr.reduce((newArray, x) => { if (x % 2) { newArray.push(x / 100) } return newArray }, [])`
   - **Description**: The `reduce` method iterates through the array and builds a new array by conditionally adding elements based on whether they are odd (checking `x % 2`).
   - **Pros**: It offers flexibility in how data is processed and accumulated, enabling complex transformations and aggregations.
   - **Cons**: The use of `reduce` can be seen as less intuitive, especially for simple tasks, and can have a steeper learning curve for developers. It also requires more lines of code compared to the other methods.

4. **`for...of` loop**
   - **Benchmark Definition**: 
     ```javascript
     newArray = [];
     for (x of arr) {
       if (x % 2) {
         newArray.push(x / 100);
       }
     }
     ```
   - **Description**: This is an imperative approach where the `for...of` loop iterates through each element of the array, checking the condition and manually maintaining a new array.
   - **Pros**: Very clear and straightforward; familiar to developers coming from various programming backgrounds. It can be more performant in cases with fewer operations.
   - **Cons**: More verbose than methods like `map` and `filter`, and less declarative, which could lead to more bugs if complex logic is added.

### Performance Results

The benchmark results indicate the execution speeds for each method (as measured in executions per second):

- **`filter().map()`**: 25,788.28 executions per second – the fastest among the methods tested.
- **`reduce()`**: 15,673.13 executions per second – considerably slower than `filter().map()`, but still efficient.
- **`flatMap()`**: 9,153.37 executions per second – the least performant, but advantageous in terms of avoiding intermediate results.
- **For...of loop**: 1,284.95 executions per second – the slowest, indicating that while easy to read, it may not be optimized for performance in this context.

### Other Considerations

1. **Readability vs. Performance**: There’s often a trade-off between how intuitive and readable the code is versus how well it performs. Developers should consider the specific use case and context when selecting an approach.
   
2. **Memory Usage**: Methods like `filter().map()` can lead to higher memory consumption since they create intermediate arrays. In contrast, `flatMap()` and `reduce()` can be more memory efficient since they eliminate the need for intermediate storage.

3. **Browser Variability**: Performance can vary across different browsers and platforms. For this benchmark, performance measurements were taken on Chrome 134 running on Windows.

### Alternatives

- **Lodash or Underscore.js**: These utility libraries provide methods like `_.filter`, `_.map`, and more, offering additional functionalities and optimizations.
- **Functional Programming Libraries**: Libraries like Ramda or Immutable.js provide enhanced array handling and might offer better performance for functional programming paradigms.
- **Typed Array Operations**: In scenarios where performance is critical, using typed arrays (e.g., `Uint8Array`, `Float32Array`) may provide better performance due to reduced overhead of array methods.

The choice of method ultimately depends on the balance between readability, performance, and the specific requirements of the project at hand.

Related benchmarks:

flatMap() vs filter().map() vs reduce() vs forOf loop v8 (version: 1)

flatMap vs filter map vs reduce() vs forOf loop

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

Created: 28 days ago by: Guest

Jump to the latest result

filter().map()

flatMap()

reduce()

forof loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 28 days ago):