Benchmark: For Number vs For Of vs Filter

Script Preparation code:

window.values = [];

for(let i = 0; i < 25000; i++) values.push({ shard: Math.floor(Math.random() * 5), channels: new Array(Math.floor(Math.random() * 175) + 25).fill(null) });

Tests:

For Number
let total = 0; for(let i = 0; i < values.length; i++) { const v = values[i]; if(v.shard === 0) total += v.channels; }
For Of
let total = 0; for(const v of values) { if(v.shard === 0) total += v.channels; }
Filter
const total = values.filter(v => v.shard === 0).reduce((a, b) => a + b.channels, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For Number
For Of
Filter

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.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

**Benchmark Overview**

The benchmark tests three different ways of iterating over an array to sum up values based on their `shard` property: `For Number`, `For Of`, and `Filter`. The test creates an array of 25,000 objects with random properties (`shard` and `channels`) and checks which approach is the fastest.

**Tested Options**

The three options compared are:

1. **For Number**: A traditional `for` loop that iterates over the array using a counter variable.
2. **For Of**: A newer syntax for iterating over arrays, introduced in ECMAScript 2015 (ES6), which uses the `of` keyword to specify the iterable.
3. **Filter**: The `filter()` method is used to create a new array with elements that pass a test provided as a function.

**Pros and Cons**

Here's a brief summary of each approach:

* **For Number**:
	+ Pros: Wide browser support, straightforward code.
	+ Cons: Can be slower due to the need for manual incrementing of the counter variable.
* **For Of**:
	+ Pros: More concise code, better performance in some cases (due to reduced overhead).
	+ Cons: May not work as expected if the iterable is a large object or array, and not supported by older browsers.
* **Filter**:
	+ Pros: Concise code, easy to read and maintain.
	+ Cons: Can be slower due to the creation of a new array and the use of a callback function.

**Library Used**

None, this benchmark only tests native JavaScript features.

**Special JS Feature/Syntax**

The `For Of` syntax is a relatively recent addition to the JavaScript language, introduced in ECMAScript 2015 (ES6). This syntax allows for more concise and expressive code when iterating over arrays or other iterables. However, it's not supported by older browsers like Internet Explorer.

**Other Considerations**

* **Array Size**: The benchmark uses an array of 25,000 elements, which can affect the performance results. Increasing or decreasing this value may alter the outcome.
* **Device and Browser**: The benchmark runs on a desktop Chrome browser with Windows as the operating system. Different devices and browsers may produce different results due to various factors like hardware acceleration, caching, and rendering optimizations.

**Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* **Map() and Reduce()**: Instead of using `filter()` and summing up values, you could use the `map()` method to create a new array with transformed values, and then use the `reduce()` method to calculate the sum.
* **Array.prototype.forEach()**: Another alternative for iterating over an array is using the `forEach()` method, which allows executing a callback function for each element in the array.

Related benchmarks:

For Number vs For Of vs Filter (version: 0)

Comparing performance of: For Number vs For Of vs Filter

Created: 4 years ago by: Registered User

Jump to the latest result

For Number

For Of

Filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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