Benchmark: traditional for loop vs for ... of

Tests:

traditional for loop
const arr = Array(10000).fill(1); let sum = 0; for (let i = 0; i < arr.length; i++) { sum += i; }
x

const arr = Array(10000).fill(1);
let sum = 0;

for (let i = 0; i < arr.length; i++) {
sum += i;
}

for ... of

const arr = Array(10000).fill(1);
let sum = 0;

for (const el of arr) {
  sum += el;
}

 
const arr = Array(10000).fill(1);let sum = 0;​for (const el of arr) {  sum += el;}​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
traditional for loop
for ... of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
traditional for loop	18772.7 Ops/sec
for ... of	17825.6 Ops/sec

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

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

Benchmark Definition

The provided JSON represents a benchmark definition, which is essentially a script that defines a simple task to be performed by different programming approaches. In this case, we have two test cases:

A traditional for loop with an index variable (i) that increments from 0 to the length of an array.
A for...of loop that iterates over the same array without an explicit index variable.

Options Compared

The options being compared are:

Traditional for loop with an index variable (i)
for...of loop (a newer, more concise syntax introduced in ECMAScript 2015)

Pros and Cons of Each Approach

Traditional for Loop
- Pros:
  - Easy to understand and implement for developers familiar with the old syntax.
  - Allows direct access to the index variable (i) if needed.
- Cons:
  - Less concise and expressive than for...of.
  - May lead to off-by-one errors if not used carefully.
for...of Loop
- Pros:
  - More concise and readable than traditional for loops.
  - Eliminates the need for an index variable, reducing the chance of off-by-one errors.
- Cons:
  - May be less familiar to developers who are not yet comfortable with this new syntax.

Libraries and Special JS Features

Neither test case uses any libraries or special JavaScript features beyond what's standard in ECMAScript 2015 (ES6). The for...of loop is simply a more concise way of iterating over an array without having to declare a separate index variable.

Other Alternatives

If you're interested in exploring other alternatives, here are a few options:

Array.prototype.forEach(): This method can be used as an alternative to both traditional for loops and for...of loops.
Arrow functions with Array.prototype.forEach(): You could also use arrow functions (introduced in ECMAScript 2015) with the forEach() method for a more concise and expressive solution.

In conclusion, MeasureThat.net's benchmark helps you compare the performance of traditional for loops versus the newer, more concise for...of loop. While both approaches have their pros and cons, for...of is generally considered a better choice due to its readability and reduced chance of off-by-one errors.

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

1. A traditional `for` loop with an index variable (`i`) that increments from 0 to the length of an array.
2. A `for...of` loop that iterates over the same array without an explicit index variable.

**Options Compared**

The options being compared are:

* Traditional `for` loop with an index variable (`i`)
* `for...of` loop (a newer, more concise syntax introduced in ECMAScript 2015)

**Pros and Cons of Each Approach**

1. **Traditional `for` Loop**
	* Pros:
		+ Easy to understand and implement for developers familiar with the old syntax.
		+ Allows direct access to the index variable (`i`) if needed.
	* Cons:
		+ Less concise and expressive than `for...of`.
		+ May lead to off-by-one errors if not used carefully.
2. **`for...of` Loop**
	* Pros:
		+ More concise and readable than traditional `for` loops.
		+ Eliminates the need for an index variable, reducing the chance of off-by-one errors.
	* Cons:
		+ May be less familiar to developers who are not yet comfortable with this new syntax.

**Libraries and Special JS Features**

Neither test case uses any libraries or special JavaScript features beyond what's standard in ECMAScript 2015 (ES6). The `for...of` loop is simply a more concise way of iterating over an array without having to declare a separate index variable.

**Other Alternatives**

If you're interested in exploring other alternatives, here are a few options:

1. **Array.prototype.forEach()**: This method can be used as an alternative to both traditional `for` loops and `for...of` loops.
2. **Arrow functions with Array.prototype.forEach()**: You could also use arrow functions (introduced in ECMAScript 2015) with the `forEach()` method for a more concise and expressive solution.

In conclusion, MeasureThat.net's benchmark helps you compare the performance of traditional `for` loops versus the newer, more concise `for...of` loop. While both approaches have their pros and cons, `for...of` is generally considered a better choice due to its readability and reduced chance of off-by-one errors.

Related benchmarks:

traditional for loop vs for ... of (version: 0)

Comparing performance of: traditional for loop vs for ... of

Created: 3 years ago by: Registered User

Jump to the latest result

traditional for loop