Benchmark: for vs forEach vs for-of vs for-reverse (short array summing 2)

Script Preparation code:

var array = Array.from({length: 10}, (_, index) => index);

Tests:

for
var sum = 0 for (var i = 0; i < array.length; i++) { sum += array[i]; }
forEach
var sum = 0 array.forEach(function(item) { sum += item; });
for-of
var sum = 0 for (var item of array) { sum += item; }
for-reverse
var sum = 0 for (var i = array.length; i--;) { sum += array[i]; }
for with cached length
var sum = 0 for (var i = 0, len = array.length; i < len; i++) { sum += array[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
forEach
for-of
for-reverse
for with cached length

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.175 Safari/537.36

Browser/OS: Chrome 96 on Windows

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

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:

1. **`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.
2. **`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.
3. **`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`.
4. **`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.

Related benchmarks:

for vs forEach vs for-of vs for-reverse (short array summing 2) (version: 0)

for vs forEach vs for-of vs for-reverse

Comparing performance of: for vs forEach vs for-of vs for-reverse vs for with cached length

Created: 2 years ago by: Guest

Jump to the latest result

for

forEach

for-of

for-reverse

for with cached length

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):