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

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => x % 3).map(x => x/100)
flatMap()
arr.flatMap(x => x % 3 ? x/100 : [])
reduce()
arr.reduce((newArray, x) => { if (x % 3) { 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: 3 years ago)

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

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
filter().map()	411.5 Ops/sec
flatMap()	96.9 Ops/sec
reduce()	489.9 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.

**Benchmark Overview**

The provided JSON represents a benchmark named "flatMap() vs filter().map() vs reduce() v2". The benchmark compares the performance of three different approaches: `flatMap()`, `filter().map()`, and `reduce()`. The script preparation code generates an array of numbers from 0 to 100,000.

**Approaches Compared**

The benchmark compares the following three approaches:

1. **flatMap()**: The `flatMap()` method is used to flatten an array by mapping each element to an array.
2. **filter().map()**: This approach uses two methods: `filter()` to remove elements that don't meet a condition, and `map()` to transform the remaining elements.
3. **reduce()**: The `reduce()` method is used to apply a reduction function to each element in an array.

**Pros and Cons of Each Approach**

*   **flatMap()**: This approach is generally faster than `filter().map()` because it avoids creating an intermediate array with `filter()`. However, it can be less efficient if the input array is very large and only a small portion of its elements are being processed.
    *   Pros: Avoids creating an intermediate array, can be faster for large arrays.
    *   Cons: Requires the input array to have enough capacity, can be slower if most elements are discarded.
*   **filter().map()**: This approach creates an intermediate array with `filter()` and then transforms it with `map()`. It's generally less efficient than `flatMap()` because of this extra step.
    *   Pros: Can handle arrays with any length, easy to read and understand.
    *   Cons: Creates an intermediate array, can be slower for large arrays.
*   **reduce()**: The `reduce()` method is typically faster than the other two approaches because it doesn't require creating intermediate arrays. However, it's often less readable due to its functional programming nature.
    *   Pros: Avoids creating intermediate arrays, can be faster for large arrays.
    *   Cons: Can be harder to read and understand, requires knowledge of functional programming concepts.

**Library Used**

None of the above approaches rely on any external libraries. They are all built-in methods in JavaScript.

**Special JS Features or Syntax**

The `flatMap()` method was introduced in ECMAScript 2019 (ES10) as a part of the standard language specification. The `filter().map()` approach and the `reduce()` method have been available since the early days of JavaScript.

**Other Alternatives**

If you want to implement these approaches manually, without using built-in methods, here are some alternatives:

*   Instead of `flatMap()`, you could use a loop with `push()` or a library like Lodash's `flatten()` function.
*   For `filter().map()`, you could create an array and push elements onto it using `push()`, then use another loop to transform the elements in place.
*   For `reduce()`, you could create an array and initialize it with the first element, then iterate through the rest of the elements and accumulate the results.

Here is an example implementation for each approach:

```javascript
// flatMap()
function flatMap(arr, callback) {
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        if (callback(arr[i])) {
            result.push(callback(arr[i]));
        }
    }
    return result;
}

// filter().map()
function filteredMapped(arr, callbackFilter, callbackMap) {
    let filtered = [];
    for (let i = 0; i < arr.length; i++) {
        if (callbackFilter(arr[i])) {
            const mapped = callbackMap(arr[i]);
            filtered.push(mapped);
        }
    }
    return filtered;
}

// reduce()
function reduceArray(arr, callback) {
    let result = [arr[0]];
    for (let i = 1; i < arr.length; i++) {
        result = callback(result, arr[i], i);
    }
    return result[0];
}
```
These implementations are less efficient and less readable than the built-in methods, but they can be useful for learning purposes or when working with older JavaScript environments.

Related benchmarks:

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

flatMap vs filter map vs reduce()

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

Created: 3 years ago by: Registered User

Jump to the latest result

filter().map()

flatMap()

reduce()

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):