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

Script Preparation code:

var sample = Array(10000).fill(0).map((_, idx) => idx);
var toSelect = 5000;

Tests:

filter().length
var total = sample.filter(s => s <= toSelect).length;
reduce
var total = sample.reduce((total, id) => total + (id <= toSelect ? 1 : 0), 0);
for loop
var total = 0; for (const id of sample) { if (id <= toSelect) { 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	3261.7 Ops/sec
reduce	3462.6 Ops/sec
for loop	3587.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net provides a platform for comparing the performance of different JavaScript coding approaches. The benchmark in question compares three methods for counting elements that satisfy a certain condition: `filter()`, `reduce()`, and a `for` loop.

**What is being tested?**

In this benchmark, we have 10,000 random numbers generated by `Array(10000).fill(0).map((_, idx) => idx)`. We need to count the number of elements that are less than or equal to a threshold value (`toSelect = 5000`). The three approaches being tested are:

1. **`filter()`**: uses the `Array.prototype.filter()` method to create a new array with only the elements that satisfy the condition.
2. **`reduce()`**: uses the `Array.prototype.reduce()` method to accumulate the count of elements that satisfy the condition.
3. **`for` loop**: uses a traditional `for` loop to iterate through the array and increment a counter for each element that satisfies the condition.

**Options compared**

The three approaches are being compared in terms of their performance, with the fastest approach expected to be at the top.

**Pros and Cons of each approach:**

1. **`filter()`**:
	* Pros: concise and readable code, easy to maintain.
	* Cons: creates a new array, which can be memory-intensive for large datasets.
2. **`reduce()`**:
	* Pros: accumulates the count in a single variable, can be more efficient than `filter()`.
	* Cons: requires an initial value for the accumulator, and the callback function needs to handle edge cases (e.g., empty array).
3. **`for` loop**:
	* Pros: straightforward and easy to understand, no memory allocation required.
	* Cons: can be slower due to the overhead of the loop, and may require more code maintenance.

**Library**

There is no specific library mentioned in the benchmark definition or test cases. However, both `filter()` and `reduce()` methods are built-in methods of the `Array` prototype in JavaScript.

**Special JS feature or syntax**

None mentioned.

**Other considerations**

When using these approaches, it's essential to consider the following:

* **Memory allocation**: `filter()` creates a new array, while `for` loop does not allocate memory.
* **Cache locality**: The `reduce()` method can benefit from cache locality if the initial value is close to the threshold value.
* **Loop unrolling**: If the dataset is small enough, using a more complex loop structure (e.g., unrolled loops) might outperform the simpler approaches.

**Alternatives**

Other alternatives for counting elements that satisfy a condition could include:

* Using `Array.prototype.every()` or `Array.prototype.some()`, which are more concise but may have performance implications.
* Implementing a custom binary search algorithm to find the threshold value, which can be faster for large datasets.
* Using parallel processing (e.g., Web Workers) if the dataset is extremely large and processing time is critical.

Related benchmarks:

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

Compare `filter().length` vs `reduce` vs `for` loop by counting element that satisfy condition. Forked from https://www.measurethat.net/Benchmarks/Show/22294/0/filterlength-vs-reduce-vs-for

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>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):