Benchmark: for vs foreach vs for..in vs for..of zzz4

Script Preparation code:

var array = new Array(100000);
for (let i = 0; i < 100000; ++i) {
  array[i] = i;
}

Tests:

for
let s = 0; for (var i = 0; i < array.length; i++) { s+=array[i]; } console.log(s)
foreach
let s = 0; array.forEach(function(n) { s+=n; }); console.log(s)
for in
let s = 0; for (const n in array) { s+=n; } console.log(s)
for..of
let s = 0; for (const n of array) { s+=n; } console.log(s)
for2
let s = 0; for (let i = 0; i < array.length; i++) { s+=array[i]; } console.log(s)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for in
for..of
for2

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Android 13; Mobile; rv:129.0) Gecko/129.0 Firefox/129.0

Browser/OS: Firefox Mobile 129 on Android

View result in a separate tab

Test name	Executions per second
for	2746.3 Ops/sec
foreach	596.3 Ops/sec
for in	57.5 Ops/sec
for..of	911.4 Ops/sec
for2	2786.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark and its test cases.

**Benchmark Purpose**

The benchmark is designed to compare the performance of different loop constructs in JavaScript: `for`, `foreach`, `for...in`, and `for...of`. The goal is to determine which loop construct is most efficient for iterating over an array.

**Options Compared**

There are four options being compared:

1. **Traditional `for` loop**: This loop uses a traditional `for` loop syntax, where the loop counter variable is declared outside the loop.
2. **`foreach` loop**: This loop uses the `forEach` method provided by arrays in JavaScript. It's a more modern and concise way of iterating over an array.
3. **`for...in` loop**: This loop uses a `for...in` loop syntax, which is often used to iterate over object properties. However, it can also be used for arrays.
4. **`for...of` loop**: This loop uses a more modern and concise way of iterating over arrays, introduced in ECMAScript 2015 (ES6). It's specifically designed for array iteration.

**Pros and Cons**

Here are some pros and cons of each option:

* **Traditional `for` loop**:
	+ Pros: Wide browser support, easy to understand and debug.
	+ Cons: Can be slower due to the overhead of declaring a new variable.
* **`foreach` loop**:
	+ Pros: Concise syntax, well-suited for array iteration.
	+ Cons: May not be as efficient as traditional `for` loops in older browsers.
* **`for...in` loop**:
	+ Pros: Can be used for both object and array iteration, flexible syntax.
	+ Cons: May be slower than traditional `for` loops due to the overhead of iterating over object properties.
* **`for...of` loop**:
	+ Pros: Concise syntax, well-suited for array iteration, good browser support.
	+ Cons: Introduced in ES6, may not work in older browsers.

**Library and Special JS Features**

None of the test cases use any external libraries. However, some options do use special JavaScript features:

* **`foreach` loop**: Uses the `forEach` method provided by arrays, which is a built-in feature.
* **`for...of` loop**: Uses the `for...of` loop syntax, introduced in ES6.

**Other Considerations**

When choosing between these loop constructs, consider the following factors:

* Browser support: If you need to support older browsers, traditional `for` loops may be a better choice.
* Code readability and maintainability: Concise syntax can make your code more readable, but may also increase complexity if not used carefully.
* Performance: Traditional `for` loops may be faster than modern loop constructs due to the overhead of new variable declarations.

**Alternatives**

If you're looking for alternative loop constructs in JavaScript, consider:

* **Array.prototype.every()**: A more concise way of iterating over arrays and testing each element against a condition.
* **Array.prototype.some()**: Similar to `every()`, but tests whether at least one element meets the condition.
* **Array.prototype.map()`: Transforms an array by applying a function to each element.

These alternatives can be used in place of traditional loops, especially when working with arrays.

Related benchmarks:

for vs foreach vs for..in vs for..of zzz4 (version: 0)

Compare loop performance

Comparing performance of: for vs foreach vs for in vs for..of vs for2

Created: one year ago by: Guest

Jump to the latest result

for

foreach

for in

for..of

for2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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