Benchmark: reduce + map filter

Script Preparation code:

var customers = [
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: true, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" },
      { active: false, name: "a", email: "b" }
  ];
  
  Array.prototype.filterMap = function(filter) {
     const r = [];
     const len = this.length;
     for(let i=0; i<len; i++) {
        const item = filter(this[i], i, this);
        if (item !== undefined) {
           r.push(item);
        }
     }
     return r;
  };

Tests:

reduce
var emails = customers.filter( (c) => c.active) .map( (c) => ({ name: c.name, email: c.email }));
map
var emails = customers.filterMap( (c) => c.active ? { name: c.name, email: c.email } : undefined);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce
map

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark definition for measuring the performance of two different approaches: `reduce` and `map/filter`. The goal is to compare the execution time of these two approaches on a large dataset of customers.

**Test Case 1: reduce**

In this test case, the code uses the `filter` method to select active customers and then applies the `map` method to transform each customer object into a new object with only `name` and `email` properties. The resulting array is stored in the `emails` variable.

The benchmarked code:
```javascript
var emails = customers.filter((c) => c.active)
  .map((c) => ({ name: c.name, email: c.email }));
```
**Test Case 2: map**

In this test case, a custom method `filterMap` is used to combine the `filter` and `map` methods. The `filterMap` method iterates over the customers array, applies the filter function (in this case, checking if the customer is active), and pushes the transformed object to a new array if the filter function returns a truthy value.

The benchmarked code:
```javascript
var emails = customers.filterMap((c) => c.active ? { name: c.name, email: c.email } : undefined);
```
**Library/Feature Used**

In this benchmark, no external libraries are used. The only custom method is `filterMap`, which is implemented as an extension to the Array prototype.

**Special JS Feature or Syntax**

No special JavaScript features or syntax are used in these test cases.

**Pros and Cons of Different Approaches**

Here's a brief summary of the pros and cons of each approach:

* **Reduce**: This approach uses two methods, `filter` and `map`, which may incur some overhead due to function calls. However, it allows for more flexibility and readability.
	+ Pros: More readable, flexible code; easy to understand intent.
	+ Cons: May be slower due to function calls.
* **Map (with custom filterMap method)**: This approach uses a single custom method `filterMap` that combines the filtering and mapping logic. It may be faster since it reduces the number of function calls.
	+ Pros: Faster execution; less overhead from function calls.
	+ Cons: Less readable, harder to understand intent.

**Other Alternatives**

Another possible alternative is using the `forEach` method with a callback function that pushes the transformed object to an array. This approach would have similar pros and cons as the `map` approach (with custom filterMap method).

Here's an example code snippet:
```javascript
var emails = [];
customers.forEach((c) => {
  if (c.active) {
    emails.push({ name: c.name, email: c.email });
  }
});
```
This approach is less readable and more verbose than the `reduce` or `map` approaches but may be faster due to fewer function calls.

Overall, the choice of approach depends on the specific requirements and priorities of the project. If readability and flexibility are essential, using `reduce` with separate methods might be a good choice. However, if performance is critical, combining filtering and mapping logic into a single custom method like `filterMap` could be a better option.

Related benchmarks:

reduce + map filter (version: 0)

Comparing performance of: reduce vs map

Created: 6 years ago by: Guest

Jump to the latest result

reduce

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):