Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Fors comparison
(version: 0)
Benchmark.js
for vs for..in vs for..of vs forEach
Comparing performance of:
for vs for.. in vs for...of vs forEach
Created:
2 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var tab = []; for (let i = 0; i < 100000; ++i) { tab.push({ a: i.toString(), b: i }); }
Tests:
for
for(let i = 0; i < 100000; ++i) { tab[i].a = 'aaaaaaaaaaa'; tab[i].b = 0; }
for.. in
for(let index in tab) { tab[index].a = 'bbbbbbbbb'; tab[index].b = 0; }
for...of
for(let obj of tab) { obj.a = 'cccccccccc'; obj.b = 0; }
forEach
tab.forEach((obj) => { obj.a = 'dddddddd'; obj.b = 0; });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
for
for.. in
for...of
forEach
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=490031" width="100%" height="500px"></iframe>
for...of
4K/s
forEach
3K/s
for
91/s
for.. in
59/s
View exact numbers
Test name
Executions per second
✓
for...of
3,564 Ops/sec
forEach
3,009 Ops/sec
for
91 Ops/sec
for.. in
59 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark. **Benchmark Overview** The benchmark compares four different ways to iterate over an array: `for`, `for...in`, `for...of`, and `forEach`. The test case creates an array of 100,000 objects and then iterates over it using each iteration method, performing a simple operation on each object. **Script Preparation Code** The script preparation code initializes an empty array `tab` with 100,000 objects: ```javascript var tab = []; for (let i = 0; i < 100000; ++i) { tab.push({ a: i.toString(), b: i }); } ``` This code creates an array of objects where each object has two properties: `a` and `b`, with the latter being an integer value. **Html Preparation Code** There is no HTML preparation code provided, which means that this benchmark focuses solely on JavaScript performance. **Iteration Methods Compared** The four iteration methods compared are: 1. **For**: Uses a traditional `for` loop with an index variable. ```javascript for (let i = 0; i < 100000; ++i) { tab[i].a = 'aaaaaaaaaaa'; tab[i].b = 0; } ``` 2. **For...in**: Uses the `in` operator to access array elements, which iterates over both the keys and values of the array. ```javascript for (let index in tab) { tab[index].a = 'bbbbbbbbb'; tab[index].b = 0; } ``` 3. **For...of**: Uses the `of` keyword to iterate directly over array elements, without needing an index variable. ```javascript for (let obj of tab) { obj.a = 'cccccccccc'; obj.b = 0; } ``` 4. **ForEach**: Uses the `forEach` method, which is a built-in function that executes a callback function for each element in an array. ```javascript tab.forEach((obj) => { obj.a = 'dddddddd'; obj.b = 0; }); ``` **Pros and Cons of Each Approach** 1. **For**: Pros: Simple, straightforward, and well-established. Cons: Requires manual indexing, which can be error-prone. 2. **For...in**: Pros: Easy to use, as it doesn't require an index variable. Cons: Iterates over both keys and values, which may not be what you want for arrays with only numerical keys. 3. **For...of**: Pros: Modern, efficient, and easy to read. Cons: Requires ECMAScript 2015+ support (Chrome 120 is a good candidate). 4. **ForEach**: Pros: Easy to use, concise, and modern. Cons: May incur additional overhead due to the callback function. **Library Usage** None of the benchmark tests explicitly uses any external libraries. However, if we consider `forEach` as a built-in library (it's not!), then it doesn't require any explicit imports or dependencies. **Special JS Features/Syntax** This benchmark does not use any special JavaScript features or syntax, such as async/await, Promises, or `let`/`const` declaration blocks. It focuses solely on the iteration methods themselves. **Alternative Approaches** If you want to compare more iteration methods or explore other optimization techniques, some alternatives could include: * Using `map()` or `reduce()` instead of `forEach` * Comparing different indexing strategies (e.g., using an array's `map` function) * Investigating the use of WebAssembly or native modules for performance * Evaluating the impact of different caching mechanisms on iteration performance Keep in mind that each alternative approach would require a new benchmark definition and script preparation code.
Related benchmarks
For loop vs <Array>.forEach() vs for...of loop
Comments
Confirm delete:
Do you really want to delete benchmark?