Benchmark: filter.map vs flatMap vs reduce performance test

Script Preparation code:

var arr = [];
let i = 0
while (i < 10000000) {
    if (i % 2 !== 0) {
        arr.push({
            name: 'without id'
        })
    } else {
        arr.push({
            name: 'withId',
            id: i
        })
    }
    i++
}

Tests:

filter.map
const x = arr.filter(item => item?.id !== undefined).map(item => ({label: item.name, value: item.id})) console.log(x, 'x')
filterMap
const y = arr.flatMap(item => item?.id !== undefined ? [{label: item.name, value: item.id}] : []); console.log(y, 'y')
reduce
const z = arr.reduce((acc = [], item) => { if (item?.id !== undefined) return [...acc, {label: item.name, value: item.id}] }, []) console.log(z, 'z')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter.map
filterMap
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 100 on Windows

View result in a separate tab

Test name	Executions per second
filter.map	0.3 Ops/sec
filterMap	0.2 Ops/sec
reduce	0.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance of three different approaches to process an array of objects with optional IDs: `filter.map`, `flatMap`, and `reduce`.

**Options Comparison**

Here's a comparison of the three options:

1.  **`filter.map`**: This approach uses the `filter()` method to remove objects without IDs, then applies the `map()` function to create a new array with labeled values.
    *   **Pros**: Simple to implement and easy to understand.
    *   **Cons**: May incur additional overhead due to filtering and mapping steps.

2.  **`flatMap`**: This approach uses the `flatMap()` method, which is similar to `map()` but also flattens an array of arrays into a single array.
    *   **Pros**: More efficient than `filter.map` since it reduces memory allocations and copies.
    *   **Cons**: May have slightly higher performance due to the additional flattening step.

3.  **`reduce`**: This approach uses the `reduce()` method to accumulate an array of labeled values into a single object.
    *   **Pros**: Can be more efficient for large datasets since it avoids creating intermediate arrays.
    *   **Cons**: May have higher performance overhead due to the reduction step.

**Libraries and Features**

*   None of the provided benchmark cases use any external libraries or special JavaScript features. They rely solely on built-in browser functionality.

**Other Considerations**

When processing large datasets, other factors can impact performance besides the algorithm itself:

*   **Memory allocation and deallocation**: Creating intermediate arrays can lead to slower performance.
*   **Cache efficiency**: Accessing data in a specific order or pattern can affect cache locality and memory access patterns.
*   **Browser optimizations**: Different browsers may have varying levels of optimization for each method, affecting results.

**Alternatives**

Other alternatives to the provided methods include:

1.  Using `Array.prototype.forEach()`: This approach is simpler than using `map()` or `reduce`, but may be less efficient due to its lack of optimization.
2.  Utilizing `Array.prototype.reduceRight()`: Similar to `reduce()`, but starts from the end of the array, which can be beneficial for certain use cases.
3.  Implementing custom loops: Writing a simple loop can sometimes outperform built-in methods like `map()` or `reduce`.
4.  Leveraging Web Workers: If performance is critical and the operation doesn't require direct access to the browser's main thread, using Web Workers might provide better results.

When choosing an approach for a specific problem, consider factors such as data size, computational complexity, and the desired level of simplicity versus optimization.

Related benchmarks:

filter.map vs flatMap vs reduce performance test (version: 0)

rethink of https://www.measurethat.net/Benchmarks/Show/11827/0/flatmap-vs-filtermap

Comparing performance of: filter.map vs filterMap vs reduce

Created: 3 years ago by: Guest

Jump to the latest result

filter.map

filterMap

reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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