Benchmark: flatMap() vs filter().map() vs for loop accumulator

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 loop
var accum = []; for (let i=0; i < arr.length; i++) { const x = arr[i]; if (x % 3) { accum.push(x/100) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
filter().map()	290.7 Ops/sec
flatMap()	288.4 Ops/sec
for loop	64.9 Ops/sec

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.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different approaches: using `filter()`, `map()` together (as a single function), and a traditional `for` loop with an accumulator. The goal is to measure which approach performs better in terms of execution speed.

**Options Compared**

1. **`filter().map()`**: This approach uses the `filter()` method to remove elements from the array that don't meet a certain condition, followed by the `map()` method to apply a transformation function to each remaining element.
2. **`flatMap()`**: This is a new JavaScript feature introduced in ECMAScript 2019, which allows you to flatten an array of arrays into a single array. In this benchmark, it's used to transform the filtered array and then remove elements that don't meet the condition.
3. **Traditional `for` loop with accumulator**: This approach uses a manual loop to iterate over the array, applying the transformation function to each element while accumulating the results in an array.

**Pros and Cons of Each Approach**

1. **`filter().map()`**:
	* Pros: Easy to read and maintain, as it's a well-known pattern.
	* Cons: Can be slower due to the overhead of function calls and object creation.
2. **`flatMap()`**:
	* Pros: Efficient, as it avoids the need for explicit loops and objects creation.
	* Cons: Requires modern JavaScript versions (ECMAScript 2019+) to work, and may not be supported by older browsers or engines.
3. **Traditional `for` loop with accumulator**:
	* Pros: Can be highly optimized for performance, as it avoids function calls and object creation overhead.
	* Cons: More difficult to read and maintain due to its complexity.

**Library Used**

None is explicitly mentioned in the provided benchmark definition. However, if we look at the individual test cases, we can see that `filter()` and `map()` are used with arrow functions (`=>`). These are features introduced in ECMAScript 2015 (ES6), which may require modern JavaScript versions to work.

**Special JS Feature or Syntax**

The benchmark uses the `flatMap()` feature, which is a new syntax introduced in ECMAScript 2019. This feature allows you to flatten an array of arrays into a single array, making it easier to process complex data structures.

**Other Considerations**

* **Warm-up**: The benchmark prepares the input array using a while loop before running each test case. This ensures that the `for` loop and accumulator approach start with a fully warmed-up array.
* **Browser Variability**: The benchmark results are reported for different browsers, operating systems, and device platforms. This helps to isolate performance differences between these factors.

**Alternatives**

Other approaches you might consider benchmarking include:

* Using other array methods like `reduce()` or `forEach()`
* Employing alternative data structures, such as linked lists or stacks
* Using parallel processing techniques (e.g., Web Workers) to take advantage of multiple CPU cores

These alternatives can provide additional insights into performance and scalability, but they may introduce additional complexity and dependencies.

Related benchmarks:

flatMap() vs filter().map() vs for loop accumulator (version: 0)

flatMap vs filter map

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

Created: 4 years ago by: Guest

Jump to the latest result

filter().map()

flatMap()

for loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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