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)

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) Benchmark.js

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: 4 years ago by: Registered User

Go to the latest result

Script Preparation code:

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]; }
.forEach(t)
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; }
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 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 i in array,
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; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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 year 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

for i in array,

374/s

for i=0; i in array

257/s

for i < length

253/s

for..of

251/s

for t = array[i]

251/s

.forEach(t)

248/s

.reduce

235/s

View exact numbers

Test name	Executions per second
✓ for i in array,	374 Ops/sec
for i=0; i in array	257 Ops/sec
for i < length	253 Ops/sec
for..of	251 Ops/sec
for t = array[i]	251 Ops/sec
.forEach(t)	248 Ops/sec
.reduce	235 Ops/sec

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

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.