Benchmark: Side effect: for i vs for of vs foreach

Script Preparation code:

var array = new Array(65535).fill(0);
var q = 0;

Tests:

for i
for (var i = 0; i < array.length; i++) { q = array[i]; }
for..of
for (var i of array) { q = array[i]; }
foreach
array.forEach((i) => q = i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for i
for..of
foreach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Browser/OS: Firefox 107 on Windows

View result in a separate tab

Test name	Executions per second
for i	6448.6 Ops/sec
for..of	1666.4 Ops/sec
foreach	2625.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark is designed to measure the performance difference between three different ways of iterating over an array: `for` loop with explicit indexing (`i`), `for...of` loop, and `forEach` method. The script preparation code creates a large array of 65,535 elements filled with zeros, and a variable `q` is initialized to zero.

**Options Compared**

The benchmark compares the performance of three different approaches:

1. **For i**: A traditional `for` loop with explicit indexing (`i`) used to iterate over the array.
2. **For...of**: A new iteration syntax introduced in ECMAScript 2015, which allows iterating over arrays using a `for...of` loop.
3. **Foreach**: The `forEach` method, which is also a part of the ECMAScript standard.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **For i**: This approach is straightforward and easy to understand, but it can be less efficient due to the overhead of explicit indexing. It's suitable for simple cases where iteration over arrays is common.
* **For...of**: This approach provides a more concise way of iterating over arrays and is often preferred in modern JavaScript code. However, it may not perform as well as `for i` in certain scenarios due to additional overhead. It's suitable for cases where readability is important.
* **Foreach**: The `forEach` method is a convenient way to iterate over arrays, but it can be slower than the other two approaches due to its own overhead and potential optimizations by modern browsers.

**Library**

None of the benchmark test cases use any external libraries. The array iteration methods are part of the ECMAScript standard.

**Special JS Features or Syntax**

No special JavaScript features or syntax is used in these benchmark test cases.

**Other Alternatives**

Some alternative approaches to iterating over arrays include:

* **Array.prototype.forEach()**: This method is similar to the `forEach` approach but uses a callback function with the array element as an argument.
* **Destructuring assignment**: Instead of using explicit indexing or iteration methods, developers can use destructuring assignment to extract individual elements from the array.

Here's an example of using destructuring assignment:
```javascript
const [q, ...rest] = array;
```
This approach is often used in modern JavaScript code and can be more concise than traditional iteration methods. However, it may not provide the same level of control as explicit indexing or iteration methods.

Overall, MeasureThat.net's benchmark provides a useful comparison between different approaches to iterating over arrays in JavaScript, helping developers choose the most efficient and suitable method for their use case.

Related benchmarks:

Side effect: for i vs for of vs foreach (version: 0)

Comparing performance of: for i vs for..of vs foreach

Created: 2 years ago by: Guest

Jump to the latest result

for i

for..of

foreach

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):