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

Script Preparation code:

var sample = 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.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++; } }

Historical Performance Data aggregated from 52 community runs

Desktop Results:

Chrome 39 runs

for loop

725K/s

filter().length

716K/s

reduce

715K/s

View exact numbers

✓ for loop: 724,763 ops/sec
• filter().length: 715,925 ops/sec
• reduce: 715,002 ops/sec

Firefox 13 runs

for loop

163K/s

filter().length

155K/s

reduce

151K/s

View exact numbers

✓ for loop: 162,618 ops/sec
• filter().length: 154,515 ops/sec
• reduce: 151,337 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 5 months ago)

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

for loop

689K/s

reduce

685K/s

filter().length

655K/s

View exact numbers

Test name	Executions per second
✓ for loop	688,710 Ops/sec
reduce	684,719 Ops/sec
filter().length	655,499 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark defines three test cases:

1. `filter().length`
2. `reduce`
3. `for` loop

These three approaches are used to count the number of elements in the `selected` array that are also present in the `sample` array.

**Options Compared**

Each option is compared in terms of execution time, measured in executions per second (ExecutionsPerSecond).

* `filter().length`: This approach uses the `filter()` method to create a new array with only the elements from `selected` that are present in `sample`. The `length` property then returns the number of elements in this filtered array.
* `reduce`: This approach uses the `reduce()` method to iterate over each element in `selected`, and for each element, checks if it is present in `sample`. If it is, a counter (initially set to 0) is incremented by 1. The final result is the total count of elements present in both arrays.
* `for` loop: This approach uses a traditional `for` loop to iterate over each element in `selected`, and for each element, checks if it is present in `sample`. If it is, an increment counter variable (`total`) is incremented by 1.

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

* `filter().length`:
	+ Pros: concise and efficient way to filter out unwanted elements.
	+ Cons: creates a new array and may not be suitable for very large datasets due to memory concerns.
* `reduce`:
	+ Pros: can handle large datasets without creating intermediate arrays, and is often considered more functional programming-style.
	+ Cons: can be slower than other approaches due to the overhead of the reduce function, and may require understanding of how it works.
* `for` loop:
	+ Pros: straightforward and easy to understand for those familiar with traditional loops.
	+ Cons: may not be as concise or efficient as other approaches, especially for large datasets.

**Library Used**

The benchmark does not explicitly mention any libraries used. However, the `filter()` and `reduce()` methods are built-in JavaScript functions that operate on arrays.

**Special JS Features/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond standard ECMAScript 2015+ (ES6+) syntax. It relies solely on basic array operations and control structures.

**Other Alternatives**

Some alternative approaches to counting the number of elements in `selected` that are also present in `sample` might include:

* Using a Set data structure, which provides faster membership testing than arrays.
* Using a library like Lodash or Moment.js, which provide utility functions for array manipulation and filtering.
* Using a custom implementation with bitwise operations to check for presence.

However, these alternatives would likely change the nature of the benchmark and may not be directly comparable to the original `filter()`, `reduce()`, and `for` loop approaches.

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

Go to the latest result

filter().length

reduce

for loop

Historical Performance Data aggregated from 52 community runs

Desktop Results:

Chrome 39 runs

Firefox 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

filter().length

reduce

for loop

Historical Performance Data aggregated from 52 community runs

Desktop Results:

Chrome 39 runs

Firefox 13 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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