Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for vs foreach vs for..of vs for..of over entries (const) etc
(version: 0)
Compare loop performance
Comparing performance of:
for vs foreach vs for..of vs for..of over entries
Created:
2 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var array = Array.from({length: 100}); var t; var s = new Set()
Tests:
for
for (let i = 0; i < array.length; i++) { s.add(array[i]) }
foreach
array.forEach(function(v, i) { s.add(v) });
for..of
for (const v of array) { s.add(v) }
for..of over entries
for (const [i, v] of array.entries()) { s.add(v) }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
for
foreach
for..of
for..of over entries
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0
Browser/OS:
Chrome 144 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
for
1381462.6 Ops/sec
foreach
1748565.4 Ops/sec
for..of
1590719.6 Ops/sec
for..of over entries
1198258.8 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and analyze what's being tested, compared options, pros and cons of each approach, and other considerations. **Benchmark Definition** The benchmark definition is a comparison of loop performance using four different approaches: 1. `for` loop 2. `.forEach()` method 3. `for...of` loop with iteration over array elements 4. `for...of` loop with iteration over array entries (using the `entries()` method) **Comparison Options** The options being compared are: * Iteration methods: + `for` loop: manual indexing and incrementing + `.forEach()` method: callback function that takes two arguments (element and index) + `for...of` loop with iteration over array elements: implicit indexing and incrementing + `for...of` loop with iteration over array entries: implicit indexing and incrementing, but using the `entries()` method to access both index and value * Approach: + Manual looping (index-based) + Using an iterator method (.forEach(), for...of) **Pros and Cons of Each Approach** 1. **Manual Looping (`for` loop)** * Pros: direct control over iteration, no additional dependencies required. * Cons: can be error-prone, requires manual indexing and incrementing, which can lead to performance issues due to cache misses. 2. **Using an Iterator Method (.forEach())** * Pros: concise, readable, and maintainable code, avoids manual indexing and incrementing. * Cons: may incur overhead due to the iterator method itself, potentially slower than manual looping. 3. **`for...of` Loop with Iteration over Array Elements** * Pros: implicit indexing and incrementing, concise and readable code, avoids manual indexing and incrementing. * Cons: may not work as expected if the array is modified during iteration, or if the loop needs to access both index and value. 4. **`for...of` Loop with Iteration over Array Entries** * Pros: implicit indexing and incrementing, concise and readable code, avoids manual indexing and incrementing. * Cons: may incur additional overhead due to accessing both index and value using `entries()`, potentially slower than the previous option. **Library Usage** None of the options explicitly use a library. However, `.forEach()` method is part of the Array prototype, which is a built-in JavaScript feature. **Special JS Features/Syntax** No special JS features or syntax are mentioned in this benchmark. The code uses standard JavaScript syntax and does not require any advanced features like async/await, Promises, or Web Workers. **Other Considerations** * **Cache Locality**: In the `for` loop, accessing array elements by index can lead to poor cache locality due to cache misses, which negatively impacts performance. * **Memory Allocation**: The `.forEach()` method may incur additional memory allocation due to creating an iterator object, while the `for...of` loops do not allocate new memory for iteration. * **Device-Specific Optimizations**: Some devices or browsers might optimize certain loop approaches over others. This benchmark provides a general comparison across different environments. **Alternatives** Other alternatives for iterating over arrays in JavaScript include: * Using a `while` loop with manual indexing and incrementing * Using the `map()` method to create a new array of transformed values * Using the `reduce()` method to accumulate values These alternatives have their own trade-offs, such as added complexity or potential performance overhead.
Related benchmarks:
Array fill foreach, vs for i loop
foreach vs for..of
foreach vs for...of
For loop vs <Array>.forEach() vs for...of loop
forEach vs for of 7
Comments
Confirm delete:
Do you really want to delete benchmark?