Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
loops-forin-forof-native-4
(version: 3)
Comparing performance of:
for-in vs for-of vs native vs native - cache lengh
Created:
7 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var arr = []; const randomizeArray = () => { for (let i = 0; i < 50000; i++) { arr[i] = Math.floor(Math.random() * 100000); } } randomizeArray();
Tests:
for-in
let dummy = 0; for (let j = 0; j < 100; j++){ for (let i in arr) { dummy += i; } }
for-of
let dummy = 0; for (let j = 0; j < 100; j++){ for (let i of arr) { dummy += i; } }
native
let dummy = 0; for (let j = 0; j < 100; j++){ for (let i = 0; i < arr.length; i++) { dummy += arr[i]; } }
native - cache lengh
let dummy = 0; for (let j = 0; j < 100; j++){ let length = arr.length; for (let i = 0; i < length; i++) { dummy += arr[i]; } }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
for-in
for-of
native
native - cache lengh
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Browser/OS:
Chrome 136 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=608364" width="100%" height="500px"></iframe>
for-of
287/s
native - cache lengh
184/s
native
95/s
for-in
4/s
View exact numbers
Test name
Executions per second
✓
for-of
287 Ops/sec
native - cache lengh
184 Ops/sec
native
95 Ops/sec
for-in
4 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations. **Benchmark Overview** The benchmark measures the performance of three different ways to iterate over an array in JavaScript: `for-in`, `for-of`, and native (using the `Array.prototype.forEach()` method). The test case is as follows: * Create a large array (`arr`) with random values. * Use three different loops to iterate over the array: + `for-in`: uses the `in` operator to get the indices of the array elements. + `for-of`: uses the `of` keyword to get the elements of the array. + Native: uses the `Array.prototype.forEach()` method. **Comparison Options** The three options are compared in terms of execution time, which is measured as "ExecutionsPerSecond". This metric represents how many iterations of the loop can be completed per second on a specific device. **Pros and Cons of Each Approach** 1. **`for-in`**: * Pros: Simple to implement, no additional dependencies required. * Cons: Can lead to slow performance due to the use of `in` operator, which may trigger unnecessary comparisons or method calls (e.g., when checking for property existence). 2. **`for-of`**: * Pros: Modern and efficient way to iterate over arrays, with good cache locality. * Cons: Requires modern JavaScript environments (ECMAScript 2015+), and the `of` keyword may not be familiar to all developers. 3. **Native (`Array.prototype.forEach()`)**: * Pros: Optimized for performance, uses caching mechanisms to improve iteration speed. * Cons: Requires additional dependencies (the `Array.prototype.forEach()` method), which can add complexity. **Other Considerations** * **Cache locality**: The `for-of` approach has good cache locality due to the way it accesses elements in contiguous memory locations. This can lead to faster performance, as the CPU can execute multiple iterations of the loop together. * **Browser support**: The `for-in` and `for-of` approaches may not work in older JavaScript environments or browsers that don't support modern iteration syntax. **Alternative Approaches** Other alternatives for iterating over arrays include: 1. Using traditional `for` loops with indices (`arr[i] = 0; while (i < arr.length) { ... }`) 2. Using array methods like `map()`, `filter()`, or `reduce()` to transform the array. 3. Using library functions, like Lodash's `map` and `forEach` functions. In this specific benchmark, the native (`Array.prototype.forEach()`) approach is expected to perform well due to its optimized implementation and caching mechanisms. However, the actual performance results may vary depending on the device, browser, and JavaScript environment used.
Related benchmarks
Set.has v.s Array.includes
Set.has v.s Array.includes v2
Comments
Confirm delete:
Do you really want to delete benchmark?