Benchmark: for..in vs for..of vs classic for

HTML Preparation code:

<div id='test'></div>

Tests:

classic for
const arr = Array.from(Array(1000000).keys()); const odds = [] for(i=0; i<arr.length; i++){ const value = arr[i]; odds[i] = (value%2 === 0) ? 'odd' : 'even'; }
for..of
const arr = Array.from(Array(1000000).keys()); const odds = [] for (const value of arr) { odds[value] = (value%2 === 0) ? 'odd' : 'even'; }
for..in
const arr = Array.from(Array(1000000).keys()); const odds = [] for (const value in arr) { odds[value] = (value%2 === 0) ? 'odd' : 'even'; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classic for
for..of
for..in

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; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
classic for	52.3 Ops/sec
for..of	55.3 Ops/sec
for..in	13.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

MeasureThat.net is testing three different approaches for iterating over an array:

1. **Classic `for` loop**: This uses a traditional `for` loop with an index variable (`i`) to iterate over the array.
2. **`for...of` loop**: This uses the new `for...of` loop syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and iterables using a single loop variable.
3. **`for...in` loop**: This uses the old `for...in` loop syntax, which was used to iterate over object properties (not arrays).

**Options comparison**

The three approaches differ in how they access and manipulate the array elements:

* Classic `for` loop: Uses an index variable (`i`) to access array elements.
	+ Pros:
		- Well-established and widely supported
	- Cons:
		- Can be error-prone due to indexing issues
		- Not optimized for performance in modern browsers
* `for...of` loop: Uses a single loop variable to iterate over the array elements directly.
	+ Pros:
		- More concise and readable than classic `for`
		- Optimized for performance in modern browsers
	+ Cons:
		- Less flexible than classic `for` due to restrictions on indexing and manipulation
* `for...in` loop: Uses a property access (using the `.in` syntax) to iterate over object properties.
	+ Pros:
		- Allows accessing array elements using property names (e.g., `arr[value]`)
	+ Cons:
		- Less efficient than classic `for` and `for...of` due to slower iteration
		- Not designed for arrays specifically, can lead to unexpected behavior

**Library usage**

There is no library used in this benchmark. The script only defines the array and variables.

**Special JS feature or syntax**

The `for...of` loop uses a new syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and iterables using a single loop variable, making it more concise and readable than traditional loops.

**Other alternatives**

If you're interested in exploring other options, here are some alternative approaches:

* Using `Array.prototype.forEach()` or `Array.prototype.map()`: These methods provide a functional programming style for iterating over arrays, but might be slower due to the overhead of function calls.
* Using `let` and `const` declarations with traditional loops: This approach provides better scoping and block-level variables, but might be less readable than using modern loop syntax.

In conclusion, MeasureThat.net's benchmark helps you understand the performance differences between three common approaches for iterating over arrays in JavaScript. The choice of loop depends on your specific use case, personal preference, and the level of optimization required.

Related benchmarks:

for..in vs for..of vs classic for (version: 0)

Testing the difference between for..in vs for..of vs classic for

Comparing performance of: classic for vs for..of vs for..in

Created: 4 years ago by: Guest

Jump to the latest result

classic for

for..of

for..in

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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