Benchmark: `filter().length` vs. `reduce` vs. `for` (with Set)

Script Preparation code:

var sample = new Set(Array(1000).fill(0).map((_, idx) => idx));
var selected = [10, 134, 245, 355, 489, 583, 682, 823, 2081, 3892, 4892, 5829, 6832];

Tests:

filter().length
var total = selected.filter(id => sample.has(id)).length;
reduce
var total = selected.reduce((total, id) => total + (sample.has(id) ? 1 : 0), 0);
for loop
var total = 0; for (const id of selected) { if (sample.has(id)) { total++; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
filter().length
reduce
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 122 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
filter().length	11187768.0 Ops/sec
reduce	14215095.0 Ops/sec
for loop	14075770.0 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 Purpose**

The benchmark compares three approaches to count the number of elements present in an array that are also present in another array: `filter().length`, `reduce`, and a `for` loop with a `Set`.

**Approaches Comparison**

1. **`filter().length`**: This approach uses the `filter()` method to create a new array containing only the elements that pass the test implemented by the provided function. Then, it returns the length of this new array.

Pros: 
    * High-level abstraction makes the code concise and readable.
    * Built-in functionality reduces boilerplate code.
   Cons:
    * Creates a new array, which can be memory-intensive for large inputs.
    * May not be as efficient as other approaches due to the creation of an intermediate array.

2. **`reduce()`**: This approach uses the `reduce()` method to iterate over the array and accumulate the count of matching elements.

Pros:
    * Can be more efficient than `filter().length` since it doesn't create a new array.
    * Allows for a flexible way to calculate the total by providing an initial value.
   Cons:
    * Requires iteration, which can lead to slower performance compared to other approaches.
    * May require manual handling of edge cases or initial values.

3. **`for` loop with `Set`**: This approach uses a traditional `for` loop and a `Set` data structure to count the matching elements.

Pros:
   * Directly counts elements without creating intermediate arrays, making it potentially more efficient.
   * Provides fine-grained control over iteration and edge cases.
   Cons:
   * Requires manual handling of edge cases or initial values (if needed).
   * May have more boilerplate code compared to `filter().length` or `reduce()`

**Library Usage**

None.

**Special JavaScript Features/Syntax**

This benchmark does not explicitly use any special JavaScript features or syntax, aside from the modern ECMAScript methods like `filter()` and `reduce()`. However, it is worth noting that some browsers may optimize these methods differently than others.

Related benchmarks:

`filter().length` vs. `reduce` vs. `for` (with Set) (version: 0)

Compare `filter().length` vs `reduce` vs `for` loop for counting array elements that are present in another array.

Comparing performance of: filter().length vs reduce vs for loop

Created: 3 years ago by: Guest

Jump to the latest result

filter().length

reduce

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):