Benchmark: for ++i < length vs .forEach(t) vs for..of vs for t = entries[++i] vs for i = 0; ++i in entries vs for ++i in object vs .reduce (entries)

Script Preparation code:

var object = {};
for (let i = 1; i <= 100000; i++) object[String(i)] = i;

AخA
 
var object = {};for (let i = 1; i <= 100000; i++) object[String(i)] = i;

Tests:

for i < length

for (let entries = Object.entries(object), i = -1, length = entries.length; ++i < length;) {
  const t = entries[i];
  window.k = t[0]
  window.v = t[1];
}

 
for (let entries = Object.entries(object), i = -1, length = entries.length; ++i < length;) {  const t = entries[i];  window.k = t[0]  window.v = t[1];}

.forEach(t)
const entries = Object.entries(object); entries.forEach(([k, v]) => { window.k = k; window.v = v; });
const entries = Object.entries(object);
entries.forEach(([k, v]) => {
window.k = k;
window.v = v;
});

for..of

const entries = Object.entries(object);
for (const [k, v] of entries) {
  window.k = k;
  window.v = v;
}

 
const entries = Object.entries(object);for (const [k, v] of entries) {  window.k = k;  window.v = v;}

for t = array[i]

for (let entries = Object.entries(object), i = -1, t; t = entries[++i]; i) {
  window.k = t[0];
  window.v = t[1];
}

 
for (let entries = Object.entries(object), i = -1, t; t = entries[++i]; i) {  window.k = t[0];  window.v = t[1];}

for i=0; i in array

for (let entries = Object.entries(object), i = -1; ++i in entries;) {
  const t = entries[i];
  window.k = t[0];
  window.v = t[1];
}

 
for (let entries = Object.entries(object), i = -1; ++i in entries;) {  const t = entries[i];  window.k = t[0];  window.v = t[1];}

for i in array,
for (const k in object) { window.k = k; window.v = object[k]; }
for (const k in object) {
window.k = k;
window.v = object[k];
}

.reduce

const entries = Object.entries(object)
entries.reduce((_, [k, v]) => {
  window.k = k;
  window.v = v;
});

 
const entries = Object.entries(object)entries.reduce((_, [k, v]) => {  window.k = k;  window.v = v;});

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 i < length
.forEach(t)
for..of
for t = array[i]
for i=0; i in array
for i in array,
.reduce

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
for i < length	252.9 Ops/sec
.forEach(t)	247.6 Ops/sec
for..of	251.3 Ops/sec
for t = array[i]	251.0 Ops/sec
for i=0; i in array	257.2 Ops/sec
for i in array,	374.1 Ops/sec
.reduce	234.5 Ops/sec

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

Overview of the Benchmark

The provided benchmark measures the performance of different loop constructs in JavaScript: for loops, array methods (.forEach, .for...of, and .reduce). The goal is to determine which approach is the most efficient.

Loop Constructs Compared

for i = 0; ++i in object: This construct uses the "in" operator to iterate over the properties of an object.
for i < length: A traditional for loop that increments a counter until it reaches the end of an array or object.
for t = entries[++i]: A variation of the traditional for loop, where the value of t is assigned using the post-increment operator (++i).
.forEach(t): An array method that executes a callback function once for each element in an array.
.for...of: An array method that iterates over an array using a for...of loop.
.reduce((_, [k, v]) => { ... }): An array method that applies a reduction function to each element in an array.

Pros and Cons of Each Approach

for i = 0; ++i in object:
- Pros: Simple and concise.
- Cons: May not be as efficient as other methods, since the "in" operator can introduce additional overhead.
for i < length:
- Pros: Traditional for loop is easy to understand and optimize.
- Cons: Can be verbose for large arrays or objects.
for t = entries[++i]:
- Pros: Similar to the traditional for loop, but with a concise syntax.
- Cons: Still uses the post-increment operator, which may introduce additional overhead.
.forEach(t):
- Pros: Easy to read and understand, no explicit loop counter needed.
- Cons: May not be as efficient as other methods, since it iterates over the array using a function call.
.for...of:
- Pros: Modern syntax is easy to read and understand, no need for an explicit loop counter.
- Cons: May not be supported in older browsers or versions of JavaScript.
.reduce((_, [k, v]) => { ... }):
- Pros: Can be used for both reduction and iteration, concise syntax.
- Cons: May not be as efficient as other methods, since it uses a function call to iterate over the array.

Library Used

The Object.entries() method is used in several test cases. This method returns an array of key-value pairs for each property in the object.

Browsers and JavaScript Versions Used

The benchmark appears to be run on Firefox 94 with modern JavaScript features enabled.

In summary, the results suggest that the most efficient loop construct is the traditional for loop (for i < length), followed closely by the .for...of method. The other methods are less efficient, but still usable in certain situations.

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of different loop constructs in JavaScript: `for` loops, array methods (`.forEach`, `.for...of`, and `.reduce`). The goal is to determine which approach is the most efficient.

**Loop Constructs Compared**

1. **`for i = 0; ++i in object`**: This construct uses the "in" operator to iterate over the properties of an object.
2. **`for i < length`**: A traditional `for` loop that increments a counter until it reaches the end of an array or object.
3. **`for t = entries[++i]`**: A variation of the traditional `for` loop, where the value of `t` is assigned using the post-increment operator (`++i`).
4. **`.forEach(t)`**: An array method that executes a callback function once for each element in an array.
5. **`.for...of`**: An array method that iterates over an array using a `for...of` loop.
6. **`.reduce((_, [k, v]) => { ... })`**: An array method that applies a reduction function to each element in an array.

**Pros and Cons of Each Approach**

1. **`for i = 0; ++i in object`**:
	* Pros: Simple and concise.
	* Cons: May not be as efficient as other methods, since the "in" operator can introduce additional overhead.
2. **`for i < length`**:
	* Pros: Traditional `for` loop is easy to understand and optimize.
	* Cons: Can be verbose for large arrays or objects.
3. **`for t = entries[++i]`**:
	* Pros: Similar to the traditional `for` loop, but with a concise syntax.
	* Cons: Still uses the post-increment operator, which may introduce additional overhead.
4. **`.forEach(t)`**:
	* Pros: Easy to read and understand, no explicit loop counter needed.
	* Cons: May not be as efficient as other methods, since it iterates over the array using a function call.
5. **`.for...of`**:
	* Pros: Modern syntax is easy to read and understand, no need for an explicit loop counter.
	* Cons: May not be supported in older browsers or versions of JavaScript.
6. **`.reduce((_, [k, v]) => { ... })`**:
	* Pros: Can be used for both reduction and iteration, concise syntax.
	* Cons: May not be as efficient as other methods, since it uses a function call to iterate over the array.

**Library Used**

The `Object.entries()` method is used in several test cases. This method returns an array of key-value pairs for each property in the object.

**Browsers and JavaScript Versions Used**

The benchmark appears to be run on Firefox 94 with modern JavaScript features enabled.

In summary, the results suggest that the most efficient loop construct is the traditional `for` loop (`for i < length`), followed closely by the `.for...of` method. The other methods are less efficient, but still usable in certain situations.

Related benchmarks:

for ++i < length vs .forEach(t) vs for..of vs for t = entries[++i] vs for i = 0; ++i in entries vs for ++i in object vs .reduce (entries) (version: 5)

Compare loop performance

Comparing performance of: for i < length vs .forEach(t) vs for..of vs for t = array[i] vs for i=0; i in array vs for i in array, vs .reduce

Created: 3 years ago by: Registered User

Jump to the latest result