Benchmark: flatMap() vs filter().map() vs reduce() - filtered 1 time out of 10 - large array

Script Preparation code:

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

Tests:

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

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 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/96.0.4664.53 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 96 on iOS 15.1

View result in a separate tab

Test name	Executions per second
filter().map()	83.2 Ops/sec
flatMap()	119.8 Ops/sec
reduce()	293.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark, "flatMap() vs filter().map() vs reduce() - filtered 1 time out of 10 - large array", measures the performance difference between three JavaScript methods: `flatMap()`, `filter()` followed by `map()`, and `reduce()`.

These methods are commonly used in data processing and manipulation. The benchmark specifically focuses on a scenario where an array is created with a large number of elements (up to 100,000) and then filtered to exclude every 10th element before mapping over the remaining elements to perform some calculation.

**Options Compared**

The three options being compared are:

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

Each option has its pros and cons:

*   **flatMap():**
    *   Pros:
        *   More concise and expressive than using `filter()` followed by `map()`.
        *   Can reduce the number of iterations required to process an array.
    *   Cons:
        *   Not supported in older browsers (e.g., Internet Explorer 11).
*   **Filter().map():**
    *   Pros:
        *   Widely supported across modern browsers and environments.
        *   Well-established pattern for filtering arrays before mapping over them.
    *   Cons:
        *   Requires two separate operations, which might lead to more overhead compared to `flatMap()`.
*   **Reduce():**
    *   Pros:
        *   Can be used in a variety of situations where accumulation is necessary.
        *   Can sometimes result in faster performance due to its ability to accumulate values without creating an intermediate array.

**Library Usage**

None of the provided benchmark definitions explicitly use any external libraries. However, `flatMap()` and `reduce()` methods are built into modern JavaScript engines, while `filter().map()` relies on native JavaScript functionality.

**Special JS Features or Syntax**

The benchmark uses a feature commonly known as "template literals" (e.g., `"var arr = [];\r\nvar i = 0;\r\n\r\nwhile (i <= 1E5) arr[i] = i++;"`). This syntax allows for the creation of multiline strings in JavaScript. Additionally, the benchmark uses a shorthand for `x % 10 ? [x/100] : []`, which is a concise way to create an array with a conditional expression.

**Other Alternatives**

If you were considering alternatives to these methods:

*   **Array.prototype.every()` and `Array.prototype.some()`: These methods can be used for filtering arrays, but they are generally slower than `filter()` because they have more overhead.
*   **D3.js or other third-party libraries**: While not necessary in this specific scenario, D3.js or similar libraries can provide a wide range of array manipulation functions, including those that might be faster or more suitable for certain use cases.

Ultimately, the choice between these methods depends on your specific requirements, performance needs, and familiarity with each approach.

Related benchmarks:

flatMap() vs filter().map() vs reduce() - filtered 1 time out of 10 - large array (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):