Benchmark: for vs foreach vs for..of over entries

Script Preparation code:

var array = Array.from({length: 100});
var t;

Tests:

for
for (let i = 0; i < array.length; i++) { if (i % 2 === 0) { t = array[i]; } }
foreach
array.forEach(function(v, i) { if (i % 2 === 0) { t = v; } });
for..of over entries
for (var [i, v] of array.entries()) { if (i % 2 === 0) { t = v; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for..of over entries

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_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Browser/OS: Chrome 103 on Mac OS X 10.11.6

View result in a separate tab

Test name	Executions per second
for	33682.4 Ops/sec
foreach	114615.0 Ops/sec
for..of over entries	95427.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark.

**What is being tested?**

The benchmark compares the performance of three different loop constructs in JavaScript: `for`, `foreach`, and `for..of` with an array entry iterator (`entries`). The loops are designed to iterate over a fixed-size array, but the iteration logic is different for each construct.

**Options compared**

* `for`: A traditional loop using `i` as an index variable.
* `foreach`: An array method that iterates over the elements of the array using an iterator callback function (`v`, `i`) and returns an iterator object (`array.forEach()`)
* `for..of` with `entries`: A newer loop construct introduced in ECMAScript 2019, which allows iterating directly over the properties of an array or iterable using an iterator expression.

**Pros and Cons**

1. **`for`**:
	* Pros: Widely supported, simple to understand.
	* Cons: Can be error-prone if not used correctly (e.g., forgetting to increment `i`), can lead to slower performance due to the overhead of manual indexing.
2. **`foreach`**:
	* Pros: Elegant and expressive, easy to read and write.
	* Cons: Requires an additional callback function, which can add complexity. The array method is also relatively slow compared to a traditional `for` loop.
3. **`for..of` with `entries`**:
	* Pros: Concise and readable, allows direct iteration over the array's properties.
	* Cons: Not all browsers support this syntax, and some may have performance overhead due to the complexity of the iterator expression.

**Library usage**

There is no library explicitly mentioned in the benchmark definition. However, the `Array.from()` method is used to create a new array instance for testing purposes.

**Special JavaScript features or syntax**

The benchmark uses newer JavaScript features:

* The arrow function syntax (`=>`) is used in some loop definitions.
* The `for..of` loop construct with an iterator expression (`array.entries()`) is used in one of the test cases.

These features are relatively modern and may not be supported by older browsers or versions of JavaScript.

**Alternative approaches**

For a comparable benchmark, other alternatives could include:

* Using `Array.prototype.forEach()` and a separate index variable.
* Implementing a custom loop using a traditional `for` loop with indexing and incrementing.
* Using a library like `iterable-iterator` to create an iterator for the array.

However, since MeasureThat.net already provides the necessary infrastructure for running these tests, it's likely that users would prefer to stick with the provided benchmark configuration.

Related benchmarks:

for vs foreach vs for..of over entries (version: 0)

Compare loop performance

Comparing performance of: for vs foreach vs for..of over entries

Created: one year ago by: Registered User

Jump to the latest result

for

foreach

for..of over entries

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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