Benchmark: for vs for of - MeasureThat.net

Script Preparation code:

var count = 1000 * 1000
var data = [];

do {
  data.push(count);
} while(--count);

Tests:

for
var length = data.length; for (var index = 0; index < length; index++) { var obj = data[index]; obj == obj; }
for of
for (var obj of data) { obj == obj; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 Edg/132.0.0.0

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	969.0 Ops/sec
for of	383.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares two approaches for iterating over an array: traditional `for` loop and `for...of` loop. The test case is simple: it pushes 1,000,000 numbers into an array and then iterates over the array using both loops, checking if each object is equal to itself.

**Script Preparation Code**

The script preparation code creates a large array `data` with 1,000,000 elements, all set to the value `count`, which is initialized to a large number. This array will be used for testing both loop approaches.

**Html Preparation Code**

There is no HTML preparation code provided, so we can assume that it's not necessary for this benchmark.

**Library and Special JS Features**

In this benchmark, there is no explicit library mentioned. However, the `for...of` loop is a built-in JavaScript feature introduced in ECMAScript 2015 (ES6). It allows iterating over arrays without the need for an index variable.

The use of `obj == obj` inside the loops is also worth noting. This check is essentially a no-op and will always return true, as any object in JavaScript has itself as its own reference value. However, this test case is not really about performance but rather about verifying that both loop approaches can execute without errors.

**Options Compared**

Two options are compared:

1. **Traditional `for` loop**: This approach uses an explicit index variable to iterate over the array.
2. **`for...of` loop**: This approach uses a more modern and concise syntax to iterate over arrays, where each iteration is bound to a value in the array.

**Pros and Cons**

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

1. **Traditional `for` loop**
	* Pros:
		+ Easy to understand and implement for developers familiar with traditional loops.
		+ Can be more predictable and easier to debug due to explicit control over iteration variables.
	* Cons:
		+ Can be verbose, especially for large arrays or complex iterations.
		+ May lead to index-related errors if not used carefully.
2. **`for...of` loop**
	* Pros:
		+ More concise and readable syntax, making it easier to write and understand.
		+ Eliminates the need for explicit index variables, reducing potential bugs.
	* Cons:
		+ May be less familiar or more intimidating to developers without experience with modern JavaScript features.

**Benchmark Results**

The latest benchmark results show that the `for...of` loop outperforms the traditional `for` loop on this specific test case. The execution rate for `for...of` is significantly higher, at 1088 executions per second, compared to 43 executions per second for `for`.

Keep in mind that this performance difference might be due to various factors, including:

* Optimizations made by the JavaScript engine
* Specific hardware and software configurations used during testing
* The nature of the array operations being performed

Other Alternatives

If you're interested in exploring other alternatives or variations on these loop approaches, here are a few options to consider:

1. **Array.prototype.forEach()**: This method provides an even more concise way to iterate over arrays without the need for explicit loops.
2. **Iterators and Generators**: JavaScript's built-in iterator protocol allows for more flexible and asynchronous iteration over data structures like arrays and objects.
3. **Other loop constructs**: Depending on your specific use case, you might consider alternative loop constructs like `while` loops or even more specialized libraries or frameworks.

I hope this explanation helps you understand the benchmark and its results!

Related benchmarks:

for vs for of (version: 0)

Comparing performance of: for vs for of

Created: 8 years ago by: Guest

Jump to the latest result

for

for of

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