Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for vs foreach vs for..in vs for..of with content
(version: 0)
Compare loop performance
Comparing performance of:
for vs foreach vs for in vs for..of
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var array = new Array(100);
Tests:
for
for (var i = 0; i < array.length; i++) { const item = array[i]; console.log(item); }
foreach
array.forEach(function(i) { console.log(i); });
for in
for (var i in array) { const item = array[i]; console.log(item); }
for..of
for (var i of array) { console.log(i); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
for
foreach
for in
for..of
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Linux; Android 12; POCO F2 Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.6367.54 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 124 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=520265" width="100%" height="500px"></iframe>
for in
3.6M/s
foreach
3.3M/s
for
678/s
for..of
649/s
View exact numbers
Test name
Executions per second
✓
for in
3,564,640 Ops/sec
foreach
3,304,129 Ops/sec
for
678 Ops/sec
for..of
649 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided JSON represents a benchmark test case created on MeasureThat.net, which compares the performance of different loop constructs in JavaScript: `for`, `forEach`, `for...in`, and `for...of`. The test aims to measure how these loops perform when iterating over an array of 100 elements. **Loop Options Compared** The test compares the performance of four different loop options: 1. **Traditional `for` loop**: This is a standard loop construct that uses a variable (`i`) to iterate over the array indices. 2. **`forEach` loop**: This is a modern loop construct introduced in ECMAScript 2015 (ES6). It allows iterating over an iterable (in this case, an array) without explicitly specifying the index. 3. **`for...in` loop**: This loop uses the `in` keyword to iterate over the array indices and values simultaneously. 4. **`for...of` loop**: This is another modern loop construct introduced in ES6, similar to `forEach`, but designed specifically for iterating over arrays using destructuring syntax. **Pros and Cons of Each Approach** 1. **Traditional `for` loop**: * Pros: Easy to understand, well-supported by older browsers. * Cons: Can be error-prone if not used carefully (e.g., incrementing the index variable incorrectly). 2. **`forEach` loop**: * Pros: Modern, concise syntax; easy to read and maintain. * Cons: May have performance overhead due to the iteration callback function. 3. **`for...in` loop**: * Pros: Allows iterating over both indices and values simultaneously. * Cons: Can be slower than traditional `for` loops or modern `for...of` loops, as it uses a more complex iteration mechanism. 4. **`for...of` loop**: * Pros: Modern, concise syntax; optimized for array iteration. * Cons: May have limited support in older browsers. **Library Used** The benchmark test case uses the `Array.prototype.forEach()` method, which is a built-in JavaScript function. The `forEach()` method calls a provided callback function once for each element in the array, passing the current element value as an argument. **Special JS Features/Syntax** None of the loop constructs used in this benchmark require any special JavaScript features or syntax beyond what is considered standard in modern JavaScript (ES6+). However, note that the `for...in` loop may have performance implications due to its use of a more complex iteration mechanism, which can lead to slower performance compared to traditional `for` loops or modern `for...of` loops. **Alternative Loops** Other alternatives for array iteration in JavaScript include: * `Array.prototype.map()`, `Array.prototype.filter()`, and `Array.prototype.reduce()` methods, which return new arrays with the results of applying a specified transformation function to each element. * Using the `every()` method or `some()` method to check if all elements or any elements meet a condition. Keep in mind that these alternative loops are designed for different use cases than traditional loop constructs and may have performance implications depending on the specific use case.
Related benchmarks
foreach vs for..of
foreach vs for...of
for-in vs foreach vs for-of
For loop vs <Array>.forEach() vs for...of loop
Comments
Confirm delete:
Do you really want to delete benchmark?