Benchmark: `filter().length` vs. `reduce`

Script Preparation code:

var sample = Array(10000).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.includes(id)).length;
reduce
var total = selected.reduce((total, id) => total + (sample.includes(id) ? 1 : 0), 0);
for loop
var total = 0; for (const id of selected) { if (sample.includes(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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
filter().length	172308.3 Ops/sec
reduce	173377.2 Ops/sec
for loop	174788.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a platform for comparing the performance of different JavaScript code snippets on various browsers and devices. In this explanation, we'll break down what's being tested in the provided benchmark and explore the pros and cons of each approach.

**Benchmark Definition**

The benchmark compares three approaches to count the number of elements present in an array (`sample`) that are also present in another array (`selected`). The three approaches are:

1. `filter().length`
2. `reduce` with a conditional statement
3. A traditional `for` loop

**Filter().length**

This approach uses the `filter()` method to create a new array containing only the elements of `sample` that are also present in `selected`. The `length` property is then used to count the number of elements in this filtered array.

Pros:

* Concise and easy to read
* Does not require explicit loops or conditionals

Cons:

* May incur additional overhead due to the creation of a new array
* Can be slower than other approaches for large input sizes

**Reduce**

This approach uses the `reduce()` method with a conditional statement to accumulate the count of elements present in both arrays. The accumulator (`total`) is initialized to 0 and incremented by 1 for each element present in both arrays.

Pros:

* Can be more efficient than `filter().length` for large input sizes, as it avoids creating a new array
* Allows for explicit control over the counting process

Cons:

* May require more lines of code to achieve the same result as `filter().length`
* Can be slower due to the additional overhead of the conditional statement and accumulator update

**For loop**

This approach uses a traditional `for` loop to iterate through each element in `selected`. For each element, it checks if that element is present in `sample`, and increments a counter (`total`) if it is.

Pros:

* Can be the most straightforward approach for those familiar with traditional loops
* Allows for explicit control over the counting process

Cons:

* Requires more lines of code compared to the other approaches
* Can be slower due to the overhead of the loop itself and conditional statements

**Library usage**

In this benchmark, the `includes()` method is used in both `filter().length` and `reduce` approaches. The `includes()` method is a built-in JavaScript method that checks if an element is present in an array.

**Special JS feature or syntax**

There are no special JavaScript features or syntax mentioned in this benchmark. However, it's worth noting that the use of the spread operator (`...`) in the `sample` array creation is a modern JavaScript feature (introduced in ECMAScript 2015).

Related benchmarks:

`filter().length` vs. `reduce` (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: one year 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):