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

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
filter().map()	269.4 Ops/sec
flatMap()	318.7 Ops/sec
for of loop	627.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined evaluates three different approaches to processing an array of numbers:

1. **filter().map()**
2. **flatMap()**
3. **for of loop**

### Options Compared

1. **filter().map()**
   - **Description:** This method first filters the array to exclude elements divisible by 3 and then maps the remaining elements by dividing them by 100.
   - **Implementation:** `arr.filter(x => x % 3).map(x => x/100)`

2. **flatMap()**
   - **Description:** This method combines filtering and mapping into one operation. It checks each element and includes it if it's not divisible by 3, transforming it by dividing by 100. If the element is divisible by 3, it returns an empty array for that element, effectively filtering it out.
   - **Implementation:** `arr.flatMap(x => x % 3 ? x/100 : [])`

3. **for of loop**
   - **Description:** This approach uses a traditional loop to iterate through the array. It checks if the current element is not divisible by 3, then pushes the transformed value onto a results array.
   - **Implementation:** 
     ```javascript
     const results = [];
     for (const x of arr) {
       if (x % 3) {
         results.push(x/100);
       }
     }
     ```

### Pros and Cons of Different Approaches

1. **filter().map()**
   - **Pros:**
     - It is more declarative and easier to read and understand, particularly for those familiar with functional programming practices.
     - It leverages built-in array methods, which can increase code quality and reduce chances for errors.
   - **Cons:**
     - This method creates intermediate arrays (one from `filter` and another from `map`), which can lead to higher memory consumption and slower performance, especially with larger datasets.

2. **flatMap()**
   - **Pros:**
     - Combines the filtering and mapping into a single step, which can be more efficient since it avoids creating multiple intermediate arrays.
     - Offers a functional approach, improving readability while maintaining performance.
   - **Cons:**
     - It may not be as immediately clear to developers unfamiliar with `flatMap()`, though it is gaining popularity.
     - Browser compatibility might be a concern for older environments, as `flatMap()` is a relatively newer addition to JavaScript.

3. **for of loop**
   - **Pros:**
     - Provides full control over the iteration process, which can be beneficial for complex logic or when performance is critical.
     - Does not create intermediate arrays, and thus manages memory use more efficiently, which may lead to better performance in some contexts.
   - **Cons:**
     - The code can be less concise and harder to read than functional approaches, especially as complexity increases.
     - More prone to bugs because of manual state management (like initializing results arrays).

### Performance Considerations

According to the latest benchmark results:
- The **for of loop** outperformed both `flatMap()` and `filter().map()`, achieving approximately 627.5 executions per second.
- The **flatMap()** option followed with about 318.7 executions per second.
- The **filter().map()** option was the least efficient, at approximately 269.4 executions per second.

### Alternatives

Apart from the three methods compared, there are several alternative approaches for processing arrays:

1. **reduce()**: A powerful method that can perform both filtering and mapping in one traversal, though it tends to be verbose and potentially less readable.
   ```javascript
   const results = arr.reduce((acc, x) => {
     if (x % 3) acc.push(x / 100);
     return acc;
   }, []);
   ```

2. **forEach()**: A simple iteration that could potentially be analogous to the for of loop but lacks the ability to easily accumulate results into a new array without additional complexity.
   ```javascript
   const results = [];
   arr.forEach(x => {
     if (x % 3) results.push(x / 100);
   });
   ```

3. **While or traditional for loops**: More granular control over loop iteration, which can sometimes yield better performance but increases code complexity and potential for errors.

Choosing the right approach ultimately depends on the specific needs of the application, readability requirements, and performance considerations for the dataset being processed.

Related benchmarks:

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

flatMap vs filter map

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

Created: 2 months ago by: Guest

Jump to the latest result

filter().map()

flatMap()

for of loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):