Benchmark: For vs For of loop

Tests:

For loop

const data = Array.from({length: 10000}, () => Math.floor(Math.random() * 1000));
let sum = 0;
for (let i=0; i < data.length; i++){
  sum += data[i];
}

AخA
 
const data = Array.from({length: 10000}, () => Math.floor(Math.random() * 1000));let sum = 0;for (let i=0; i < data.length; i++){  sum += data[i];}

For of loop

const data = Array.from({length: 10000}, () => Math.floor(Math.random() * 1000));
let sum = 0;
for (const n of data){
  sum += n;
}

 
const data = Array.from({length: 10000}, () => Math.floor(Math.random() * 1000));let sum = 0;for (const n of data){  sum += n;}

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
For loop
For of loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0

Browser/OS: Firefox 117 on Linux

View result in a separate tab

Test name	Executions per second
For loop	3931.0 Ops/sec
For of loop	2929.5 Ops/sec

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

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

Benchmark Overview

The benchmark compares two approaches to iterate over an array: traditional for loop and for...of loop. The test case uses JavaScript arrays with random integer values and calculates the sum of all elements in each iteration.

Options Compared

Traditional for Loop: This approach uses a manual index variable (i) to keep track of the current element being processed.
For...of Loop: This approach uses the iterator protocol to iterate over the array, which eliminates the need for an explicit index variable.

Pros and Cons

Traditional for Loop:
- Pros: More control over iteration order (e.g., iterating in reverse), easier to debug.
- Cons: Error-prone (indexing issues, out-of-bounds errors).
For...of Loop:
- Pros: Less prone to indexing errors, more concise and readable code.
- Cons: Limited control over iteration order, might be slower due to additional overhead.

Library Used

None explicitly mentioned in the benchmark definition. However, JavaScript's built-in Array.prototype.forEach() method is implicitly used for the For...of loop implementation.

Special JS Feature/Syntax

None explicitly mentioned in the benchmark definition.

Other Alternatives

For other iteration methods, consider:

**Array.prototype.map()`: Returns a new array with the result of applying a provided function to each element.
Array.prototype.reduce(): Applies a reduction operation to an accumulator and elements of the array.
for...in Loop: Iterates over an object's enumerable properties, not suitable for arrays.

In conclusion, this benchmark tests the performance difference between traditional for loop and For...of loop in JavaScript. The results suggest that For...of loop is generally faster due to reduced overhead and fewer indexing errors. However, this may depend on specific use cases and optimizations.

Keep in mind that JavaScript engines might optimize these loops differently, so the performance differences might vary across different browsers and environments.

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares two approaches to iterate over an array: traditional `for` loop and `for...of` loop. The test case uses JavaScript arrays with random integer values and calculates the sum of all elements in each iteration.

**Options Compared**

1. **Traditional `for` Loop**: This approach uses a manual index variable (`i`) to keep track of the current element being processed.
2. **`For...of` Loop**: This approach uses the iterator protocol to iterate over the array, which eliminates the need for an explicit index variable.

**Pros and Cons**

1. **Traditional `for` Loop**:
	* Pros: More control over iteration order (e.g., iterating in reverse), easier to debug.
	* Cons: Error-prone (indexing issues, out-of-bounds errors).
2. **`For...of` Loop**:
	* Pros: Less prone to indexing errors, more concise and readable code.
	* Cons: Limited control over iteration order, might be slower due to additional overhead.

**Library Used**

None explicitly mentioned in the benchmark definition. However, JavaScript's built-in `Array.prototype.forEach()` method is implicitly used for the `For...of` loop implementation.

**Special JS Feature/Syntax**

None explicitly mentioned in the benchmark definition.

**Other Alternatives**

For other iteration methods, consider:

1. **Array.prototype.map()`: Returns a new array with the result of applying a provided function to each element.
2. **Array.prototype.reduce()**: Applies a reduction operation to an accumulator and elements of the array.
3. **`for...in` Loop**: Iterates over an object's enumerable properties, not suitable for arrays.

In conclusion, this benchmark tests the performance difference between traditional `for` loop and `For...of` loop in JavaScript. The results suggest that `For...of` loop is generally faster due to reduced overhead and fewer indexing errors. However, this may depend on specific use cases and optimizations.

Keep in mind that JavaScript engines might optimize these loops differently, so the performance differences might vary across different browsers and environments.

Related benchmarks:

For vs For of loop (version: 0)

Comparing performance of: For loop vs For of loop

Created: 5 years ago by: Guest

Jump to the latest result