Benchmark: flatMap() vs filter().map() vs for..of

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 : [])
for..of
var filtered = [] for(const x of arr) { if(x % 3) filtered.push(x/100) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().map()
flatMap()
for..of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/110.0

Browser/OS: Firefox 110 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
filter().map()	262.5 Ops/sec
flatMap()	211.2 Ops/sec
for..of	415.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, compared, and their pros/cons.

**Benchmark Definition**

The benchmark measures the performance of three different approaches to process an array:

1. `flatMap()`: Flattens an array by applying a function to each element.
2. `filter().map()`: Uses the `filter()` method to remove elements that don't meet a condition, and then applies the `map()` method to transform the remaining elements.
3. `for..of`: Loops through the array using the `for...of` loop syntax and pushes transformed elements to a new array.

**Comparison**

The benchmark compares the performance of these three approaches on an array of 100,000 elements, where each element is initialized in the script preparation code.

**Library: None**

There are no libraries used in this benchmark.

**Special JS Features/Syntax: `for...of` loop**

The `for...of` loop is a built-in JavaScript feature introduced in ECMAScript 2015. It allows looping through iterable objects, such as arrays, without the need for indices or explicit loops.

**Pros and Cons of each approach:**

1. **flatMap()**:
	* Pros:
		+ Shorter code
		+ Can be more efficient due to avoiding unnecessary array creations
	* Cons:
		+ Less intuitive than `filter().map()` for complex transformations
2. **filter().map()**:
	* Pros:
		+ More intuitive and readable, especially for complex transformations
	* Cons:
		+ Can be slower due to the extra iteration over the filtered array
3. **for...of**:
	* Pros:
		+ Efficient use of memory, as it doesn't create new arrays
	* Cons:
		+ More verbose and less intuitive than `filter().map()` or `flatMap()`

**Other alternatives**

In addition to the three approaches mentioned above, other alternatives for processing arrays include:

1. **Array.prototype.forEach()`: Loops through the array without creating a new array.
2. **reduce()`: Reduces an array to a single value by applying a function to each element.

However, `for...of` loop is likely chosen here due to its concise syntax and potential for performance benefits when working with large arrays.

**Benchmark Result**

The latest benchmark result shows the execution rate per second for each approach:

1. **for..of**: 415.38 executions/second
2. **filter().map()**: 262.45 executions/second
3. **flatMap()**: 211.16 executions/second

These results suggest that `for...of` loop is the fastest approach, followed by `filter().map()`, and then `flatMap()`. However, it's essential to note that these results may vary depending on the specific use case and environment.

Related benchmarks:

flatMap() vs filter().map() vs for..of (version: 0)

flatMap vs filter map vs for..of

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

Created: one year ago by: Guest

Jump to the latest result

filter().map()

flatMap()

for..of

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