Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for of vs forEach vs for
(version: 0)
Comparing performance of:
for vs forEach vs for of
Created:
7 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var arr = []; for (var i = 0; i < 10000; i++) { arr[i] = {x: 4 + i, y: 'test string' + i, q: {z: '' + i}}; }
Tests:
for
let x = 1; for (let i = 0; i < arr.length; ++i) { x = arr[i]; }
forEach
let x = 1; arr.forEach(el => x = el);
for of
let x = 1; for(el of arr) { x = el; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
for
forEach
for of
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 days ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Brave/1 Version/26.4 Safari/605.1.15
Browser/OS:
Safari 26 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
for
3582.5 Ops/sec
forEach
2930.9 Ops/sec
for of
4658.7 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark JSON and explain what's being tested. **Benchmark Definition** The test case measures the performance difference between three different iteration methods: 1. **Traditional `for` loop**: This is the most common way to iterate over an array in JavaScript. It uses a manual index variable (`i`) to access each element. 2. **`forEach` method**: Introduced in ECMAScript 5, `forEach` allows iterating over arrays without exposing the underlying array structure. It's more concise and readable than traditional loops. 3. **`for...of` loop**: Part of ECMAScript 2015 (ES6), `for...of` is a new way to iterate over iterable objects like arrays, maps, or sets. It eliminates the need for an index variable. **Options Compared** The benchmark compares the performance of these three iteration methods: * **Traditional `for` loop**: Accesses each element using the manual index variable (`i`). * **`forEach` method**: Iterates over the array using the callback function (`el => x = el`). * **`for...of` loop**: Iterates over the array using the iterator expression (`(el of arr)`). **Pros and Cons** Here's a brief summary: ### Traditional `for` Loop Pros: * Well-established syntax * Easy to understand and maintain * Suitable for performance-critical code Cons: * Verbose code * More prone to errors due to manual index management ### `forEach` Method Pros: * Concise syntax * Easy to read and maintain * Less error-prone than traditional loops Cons: * Can be slower than traditional loops due to the overhead of callback functions * May not be as efficient for large datasets ### `for...of` Loop Pros: * More concise syntax compared to traditional loops * Reduces errors by eliminating manual index management * Suitable for modern JavaScript development Cons: * Less familiar syntax for some developers * May require additional setup for iterator expressions **Libraries and Features** There are no libraries used in this benchmark. However, note that `forEach` is a built-in method of arrays in JavaScript. **Special JS Feature or Syntax** No special JavaScript features or syntax are being tested in this benchmark. The focus is on the iteration methods themselves. **Alternatives** If you're looking for alternative iteration methods, consider: * **`map()` and `reduce()`**: These are other built-in array methods that can be used for data processing. * **`Array.prototype.forEach()` with a custom iterator**: While not recommended due to performance implications, this approach allows for more control over the iteration process. For modern JavaScript development, it's essential to understand these iteration methods, especially `for...of`, as they provide a concise and efficient way to work with iterable objects.
Related benchmarks:
for.. of vs forEach
for..of vs for vs forEach
for (i < n) vs forEach vs for...of
for of vs forEach with console log
Comments
Confirm delete:
Do you really want to delete benchmark?