Benchmark: filter-map vs reduce fixed vs for

Script Preparation code:

a=[];
for(i=0;i<1000;i++) a.push(Number(i)/1000);
var filtering=x=>(x*114514)%1>0.5;
var mapping=x=>x+0.1919;
var reducing=(acc,x)=>{
  if((x*114514)%1>0.5) acc.push(x+0.1919);
  return acc;
}

const forLoop = (a) => {
  let acc = []
  for (let i = 0; i < a.length; i++) {
    let x = a[i];
    if ((x * 114514) % 1 > 0.5) acc.push(x + 0.1919);
  }
  return acc
}

Tests:

map-filter
a.filter(filtering).map(mapping);
reduce
a.reduce(reducing,[]);
for
forLoop(a)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map-filter
reduce
for

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 132 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
map-filter	240971.6 Ops/sec
reduce	386548.1 Ops/sec
for	399214.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you've provided tests three different approaches to filtering and mapping an array of numbers in JavaScript:

1. **map-filter** using `.filter()` followed by `.map()`
2. **reduce** using `.reduce()` with a custom accumulator function
3. **for** using a traditional `for` loop

### Options Compared

1. **map-filter (`a.filter(filtering).map(mapping);`)**
   - This approach first filters the array `a` using the `filtering` function, then maps the filtered results using the `mapping` function.
   - **Pros:**
     - Clear and expressive: This method is often easier to read and understand, especially for those familiar with functional programming.
     - Native functionality: Uses built-in array methods which are well-optimized in many JavaScript engines.
   - **Cons:**
     - Performance overhead: Creates two separate passes over the array, which can be less efficient than a single pass when dealing with larger datasets.

2. **reduce (`a.reduce(reducing, []);`)**
   - This method processes the array in a single pass, applying a custom reducing function `reducing` that accumulates results conditionally.
   - **Pros:**
     - Single pass performance: More efficient in terms of time complexity (O(n)) since it avoids multiple iterations over the array.
     - Flexible: The `reduce` method can be adapted for a variety of use cases beyond filtering and mapping.
   - **Cons:**
     - Complexity: The use of `reduce` can make code less readable, especially for those not familiar with functional programming concepts.
     - Error-prone: It's easier to introduce bugs due to the accumulator's state and return value.

3. **for (`forLoop(a)`)**
   - This traditional approach uses a standard `for` loop to filter and map the array items.
   - **Pros:**
     - Control: Offers full control over the iteration process and can be more intuitive for those comfortable with imperative programming.
     - Possibly better performance: In certain environments, particularly where modern array methods may introduce overhead, a loop can be faster.
   - **Cons:**
     - Verbosity: More lines of code, which can make the logic less clear compared to declarative styles like `filter` and `map`.
     - Less functional: Doesn't leverage functional programming paradigms that are often more desirable in JavaScript.

### Libraries or Features Used
The benchmark does not use any external libraries; it relies solely on built-in JavaScript array methods and standard JavaScript syntax.

### Special JavaScript Features
The benchmark does utilize arrow functions, which provide a concise syntax for writing functions in JavaScript. Arrow functions have a lexical `this`, meaning they don't create their own context but inherit it from the parent scope. However, they are not unique to this benchmark and are widely available in ES6 and later versions.

### Performance Results
According to the latest benchmark results:
- The `for` loop showed the highest performance with 399,214 executions per second.
- The `reduce` method came in second with 386,548 executions per second.
- The `map-filter` combination was the slowest, at 240,971 executions per second.

### Alternatives
Aside from these approaches, other alternatives for filtering and mapping could include:
- **Using a library** such as Lodash, which offers various utility functions that might optimize performance through specific implementations.
- **Array comprehensions** (not widely supported yet) could provide a cleaner syntax for similar operations.
- **Typed arrays** or using WebAssembly for performance-critical applications, as they handle large data more efficiently.

In summary, the choice between these methods should consider both the clarity of the code and performance, especially as the size of the data set increases. Each approach has its strengths depending on the specific use case.

Related benchmarks:

filter-map vs reduce fixed vs for (version: 1)

modified version of `map-filter vs reduce` that switches the order of operations Original was not fair comparison as it mapped all iterations not just the ones that passed the filter * added for loop

Comparing performance of: map-filter vs reduce vs for

Created: one month ago by: Guest

Jump to the latest result

map-filter

reduce

for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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