Benchmark: filter map vs for loop

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const array = Array.from({length: 10_000}, (_, i) => i)

Tests:

for loop
const result = [] for (const el of array) if (el % 2) result.push(el*el)
filter map
array.filter(el => el%2).map(el => el*el)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
filter map

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
for loop	14982.4 Ops/sec
filter map	9423.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark defined on MeasureThat.net tests two different approaches for filtering and transforming an array of numbers: using a `for` loop versus using the `filter` followed by `map` methods.

### Options Compared
1. **For Loop**:
   - **Test Name**: "for loop"
   - **Test Definition**: `const result = []; for (const el of array) if (el % 2) result.push(el*el);`
   - In this approach, we iterate through each element of the array using a `for...of` loop. For each element, it checks if the element is odd (using `el % 2`) and, if true, squares the element and pushes it into the result array.

2. **Filter and Map**:
   - **Test Name**: "filter map"
   - **Test Definition**: `array.filter(el => el % 2).map(el => el * el);`
   - This method first filters the array to keep only the odd numbers (using the `filter` method), and then it maps over those filtered numbers to square them (using the `map` method).

### Pros and Cons

**For Loop**:
- **Pros**:
  - Generally more control: A `for` loop allows for more complex logic within the iteration, such as early exits or more advanced operations.
  - Performance: In many JavaScript engines, raw loops tend to be faster than higher-order functions due to less overhead.
  
- **Cons**:
  - More verbose: The syntax involves more lines of code and can be less readable for simple operations.
  - Manual handling of result accumulation: The programmer is responsible for initializing and managing the results array.

**Filter and Map**:
- **Pros**:
  - Readability: The chain of `filter` and `map` can be more declarative, making it clearer what transformations are being applied.
  - Functional Programming: This approach is often seen as more idiomatic in JavaScript, leveraging functional programming concepts which some developers prefer for cleaner code.
  
- **Cons**:
  - Performance overhead: The use of `filter` and `map` creates intermediate arrays, which could lead to more memory usage and slower execution, especially for large datasets.
  - Less control: For more complex iteration requirements, this method might be limiting.

### Other Considerations
- **Performance Metrics**: The benchmark results show that the `for loop` executes approximately 18,514 operations per second, while the `filter` followed by `map` achieves about 16,321 operations per second. This suggests that, at least in this specific test case on the defined environment (Firefox on Windows), the `for` loop is faster, which aligns with common experiences in JavaScript performance evaluations.
  
- **Alternative Approaches**:
  - **Reduce**: An alternative to the `filter` and `map` might be to use `reduce`, which can combine filtering and transformation into a single iteration, potentially optimizing performance.
  - **Array comprehensions**: If JavaScript provides array comprehensions in future versions, they may offer a syntactically cleaner and potentially more efficient way to handle such transformations.
  - **Using libraries**: Libraries like Lodash offer utility functions that can make such operations easier and sometimes more performant, depending on their implementation.

The benchmark compares fundamental paradigms in JavaScript: imperative versus declarative programming styles. Each has its place depending on the context of the application being developed, the size of the dataset, and the complexity of the operations. Understanding these differences helps engineers make informed decisions on which method to use for particular scenarios.

Related benchmarks:

filter map vs for loop (version: 1)

Comparing performance of: for loop vs filter map

Created: one year ago by: Guest

Jump to the latest result

for loop

filter map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):