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

Script Preparation code:

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

Tests:

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

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is tested?**

The benchmark measures the performance of three different approaches for filtering and mapping data in JavaScript:

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

Each test case consists of a specific input data, which is generated using a while loop that creates an array of numbers from 0 to 100,000.

**Options compared**

The three approaches are compared in terms of their performance, measured by the number of executions per second (ExecutionsPerSecond).

* `filter().map()`: This approach uses the `Array.prototype.filter()` method to filter out elements that don't meet a certain condition and then uses the `Array.prototype.map()` method to transform the remaining elements.
* `flatMap()`: This approach uses the `Array.prototype.flatMap()` method, which is a more modern and efficient way of flattening an array. It's designed to be faster than using `filter()` and `map()` sequentially.
* `reduce()`: This approach uses the `Array.prototype.reduce()` method to accumulate elements in an array.

**Pros and cons**

Here are some pros and cons of each approach:

* `filter().map()`:
	+ Pros: Easy to understand, widely supported by browsers.
	+ Cons: Can be slower than other approaches due to the overhead of function calls.
* `flatMap()`: 
	+ Pros: More efficient than sequential filtering and mapping, designed for performance.
	+ Cons: Less intuitive than other approaches, requires modern JavaScript features (ES6+).
* `reduce()`:
	+ Pros: Can be more memory-efficient, uses accumulation to transform data in-place.
	+ Cons: Requires accumulator function implementation, can be slower due to the overhead of function calls.

**Library usage**

There is no external library used in this benchmark. The methods used are part of the standard JavaScript API.

**Special JS feature or syntax**

The `flatMap()` method is a relatively new addition to the JavaScript standard library, introduced in ES6 (ECMAScript 2015). It's designed to be faster and more efficient than sequential filtering and mapping.

**Other alternatives**

If you're interested in exploring other approaches, here are some additional options:

* Using `Array.prototype.forEach()` with callback functions can also filter and map data.
* Using `Array.prototype.every()` and `Array.prototype.some()` can also filter data, but may not be as efficient for larger datasets.
* Using libraries like Lodash or Ramda can provide additional filtering and mapping capabilities, but may introduce overhead due to the external library.

Keep in mind that performance differences between these approaches can vary depending on the specific use case and dataset.

Related benchmarks:

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

flatMap vs filter map vs reduce()

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

Created: 4 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

reduce()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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