const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;items.forEach(i => index++);const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;for (let i in items) { index++;}const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;for (let i of items) { index++;}const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;for(let i = 0; i < items.length; ++i) { index++;}const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));let index = 0;for(let i = items.length; i > 0; --i) { index++;}const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));items.map((_, i)=> i++);const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));items.reduce((acc, curr)=> acc++, 0);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| foreach | |
| for-in | |
| for-of | |
| for | |
| optimized-for | |
| map | |
| reduce |
| Test name | Executions per second |
|---|---|
| foreach | 6291.3 Ops/sec |
| for-in | 6301.2 Ops/sec |
| for-of | 6797.1 Ops/sec |
| for | 6740.6 Ops/sec |
| optimized-for | 6730.4 Ops/sec |
| map | 6687.3 Ops/sec |
| reduce | 6725.1 Ops/sec |
I'm ready to dive into the world of JavaScript microbenchmarks.
Benchmark Overview
The provided benchmark measures the performance of six different looping constructs in JavaScript: forEach, for-in, for-of, for, and two optimized versions (optimized-for and an unspecified variant). The test case generates an array of 1000 random numbers and iterates over it using each looping construct.
Looping Constructs Compared
Here's a brief overview of the loop constructs compared in the benchmark:
forEach: Iterates over an array using the forEach method, which calls the provided callback function for each element in the array.for-in: Iterates over an array-like object (in this case, the generated array) using a traditional for loop with in syntax.for-of: Iterates over an array using the for...of loop syntax, which is a more modern and concise way of iterating over arrays.for: Similar to for-in, but uses a traditional for loop without in syntax.optimized-for: This variant uses a manual index variable to iterate over the array, bypassing the need for forEach or map.Pros and Cons of Each Approach
Here are some general pros and cons of each looping construct:
forEach: Pros: concise, easy to read; Cons: can be slower due to function call overhead.for-in: Pros: widely supported, but can lead to issues with array-like objects; Cons: less readable than other options.for-of: Pros: modern, concise syntax; Cons: may not work as expected in older browsers or environments.for: Pros: simple, easy to understand; Cons: less readable than forEach or for-of.optimized-for: Pros: can be faster due to manual index variable; Cons: more error-prone and less readable.Library Used
None of the benchmark tests use any external libraries. The loops are executed directly within the JavaScript interpreter.
Performance Results
The benchmark results show that:
forEach is slower than all other options.for-in and for-of have similar performance, with slight variations depending on the browser.for is faster than both foreach and for-in.optimized-for is the fastest option, followed closely by an unspecified variant (which was skipped in this benchmark).Overall, the results suggest that the choice of looping construct can impact performance, but also consider readability and maintainability.
