var array = Array.from({length: 10}, (_, index) => index);
var sum = 0
for (var i = 0; i < array.length; i++) {
sum += array[i];
}
var sum = 0
array.forEach(function(item) {
sum += item;
});
var sum = 0
for (var item of array) {
sum += item;
}
var sum = 0
for (var i = array.length; i--;) {
sum += array[i];
}
var sum = 0
for (var i = 0, len = array.length; i < len; i++) {
sum += array[i];
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
for | |
forEach | |
for-of | |
for-reverse | |
for with cached length |
Test name | Executions per second |
---|---|
for | 275678.3 Ops/sec |
forEach | 3758591.5 Ops/sec |
for-of | 4447812.0 Ops/sec |
for-reverse | 498733.1 Ops/sec |
for with cached length | 429572.0 Ops/sec |
Let's dive into the details of the provided benchmark.
Overview
The provided benchmark measures the performance differences between four different ways to iterate over an array in JavaScript: for
, forEach
, for-of
, and for-reverse
. The test case uses a small array with 10 elements, which is summed up using a simple loop. This allows us to focus on the iteration mechanisms rather than dealing with larger datasets or more complex calculations.
Iteration Mechanisms
Each iteration mechanism has its strengths and weaknesses:
for
: This traditional approach uses an index variable (i
) to keep track of the current element's position in the array. It requires manual incrementation of the index using i++
. Pros: Simple, easy to understand, and widely supported. Cons: Can be slower due to unnecessary increments.forEach
: This method uses a callback function to process each element in the array. The callback receives an item
parameter that represents the current element. Pros: More concise and expressive than traditional for
loops. Cons: Can be less efficient since it creates a new scope for the callback, which may incur overhead.for-of
: This modern approach uses a single loop variable (item
) to iterate over the array elements. It automatically manages the index incrementation for you. Pros: More concise and expressive than traditional for
loops. Cons: Less widely supported in older browsers or environments that don't support for-of
.for-reverse
: This approach uses a loop variable (i
) to iterate over the array elements from the end to the beginning. It requires manual incrementation of the index using i--
. Pros: More concise and expressive than traditional for
loops with reverse iteration. Cons: Less widely supported, as it may not be familiar to some developers.Library
The benchmark does not use any specific JavaScript library beyond what's included in the HTML file or provided by the browser (e.g., Array.from()). However, modern browsers provide a range of built-in APIs that can simplify various tasks, such as:
Array.prototype.forEach()
: A method to iterate over an array and execute a callback function for each element.Array.prototype.entries()
and Array.prototype.keys()
: Methods to access the index and key-value pairs of an array, respectively.Special JS Features
None of the provided benchmark cases use any special JavaScript features beyond what's supported by modern browsers. However, it's worth noting that some older browsers or environments might not support certain features like for-of
or other modern APIs.
Benchmark Preparation Code and Test Cases
The preparation code creates an array with 10 elements using Array.from()
, which is a convenient way to create an array from an iterable source. The test cases define four different iteration mechanisms, each with its own benchmark definition. These definitions are used to measure the performance of each approach.
Other Alternatives
If you're interested in exploring other alternatives, here are some options:
while
loops: An alternative way to iterate over arrays using a while
loop that manually increments the index.map()
, filter()
, and reduce()
methods: Built-in array methods that can be used for iteration, but often require more complex logic to achieve similar results as traditional loops.Generator
functions: A way to create iterators that can be used in a loop, providing more flexibility than traditional arrays.Overall, the provided benchmark offers a concise and easy-to-understand comparison of four different iteration mechanisms in JavaScript. It provides valuable insights into the performance characteristics of each approach, which can help developers optimize their code for better performance.