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

Script Preparation code:

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

Tests:

filter().map()
arr.filter(x => x !== 0 && x % 3 && x !== 666).map(x => Math.round(x * Math.sqrt(x/100)))
flatMap()
arr.flatMap(x => (x !== 0 && x % 3 && x !== 666) ? Math.round(x * Math.sqrt(x/100)) : [])
reduce()
arr.reduce((acc, x) => { if (x !== 0 && x % 3 && x !== 666) { acc.push(Math.round(x * Math.sqrt(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: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().map()	52.7 Ops/sec
flatMap()	50.9 Ops/sec
reduce()	52.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested, compared, and other considerations.

**Benchmark Definition**

The benchmark tests three different approaches to perform a specific task:

1. `filter().map()`: This approach uses the `filter()` method to remove elements that don't meet certain conditions (in this case, numbers that are not divisible by 3 or equal to 666) and then applies the `map()` method to round the remaining numbers.
2. `flatMap()`: This approach uses the `flatMap()` method to flatten an array of arrays and apply a transformation function to each element.
3. `reduce()`: This approach uses the `reduce()` method to accumulate an array of rounded numbers.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Pros of each approach:**
	+ `filter().map()`: This approach is often considered the most readable and maintainable way to perform a transformation on an array. It's also widely supported by browsers.
	+ `flatMap()`: This approach can be more efficient than using `filter()` followed by `map()` because it avoids creating intermediate arrays. However, it requires more complex logic to handle nested arrays.
	+ `reduce()`: This approach is often used for accumulating values in an array and can be more memory-efficient than other approaches. However, it requires more setup code and may not be as readable.
* **Cons of each approach:**
	+ `filter().map()`: This approach creates two intermediate arrays, which can lead to performance issues for large datasets.
	+ `flatMap()`: This approach can be less readable due to the complex logic required to handle nested arrays. Additionally, it may not work correctly in older browsers that don't support this method.
	+ `reduce()`: This approach requires more setup code and can lead to stack overflow errors if the accumulator array is too large.

**Library and Purpose**

In none of the test cases provided does a specific library (e.g., jQuery, Lodash) play a significant role. However, some libraries may be used in real-world applications that implement these approaches, such as jQuery's `filter()` method or Lodash's `map()` function.

**Special JS Features and Syntax**

None of the test cases provided make use of special JavaScript features or syntax (e.g., async/await, promises) beyond what is required to implement the benchmarked code.

Related benchmarks:

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

flatMap vs filter map

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

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