Benchmark: for/for in/forEach array sum

Script Preparation code:

var array = new Array(10000);
for (let i = 0; i < array.length; i++) {
  array[i] = i;
}

Tests:

for
let sum = 0; for (let i = 0; i < array.length; i++) { sum += array[i]; }
for each
let sum = 0; for (let item in array) { sum += item; }
forEach
let sum = 0; array.forEach(function(item, index) { sum += item; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for each
forEach

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/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
for	650.6 Ops/sec
for each	3595.0 Ops/sec
forEach	22844.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark and its results in detail.

**Benchmark Overview**

The benchmark measures the performance of three different ways to sum up the elements of an array:

1.  **Traditional For Loop**: Using a traditional for loop with `array.length` as the iteration variable.
2.  **For Each Loop**: Using the `for...in` loop, which iterates over each property (i.e., element) in the object.
3.  **ForEach Function**: Using the `Array.prototype.forEach()` function.

**Benchmark Preparation Code**

The preparation code sets up an array with 10,000 elements and initializes its values using a for loop:

```javascript
var array = new Array(10000);
for (let i = 0; i < array.length; i++) {
    array[i] = i;
}
```

**Test Cases**

There are three test cases in this benchmark:

1.  **Traditional For Loop**: This test case uses a traditional for loop to iterate over the elements of the array and sum them up.
2.  **For Each Loop**: This test case uses the `for...in` loop to iterate over each element in the array and sum them up.
3.  **ForEach Function**: This test case uses the `Array.prototype.forEach()` function with a callback function to iterate over each element in the array and sum them up.

**Library Used**

None of these test cases use any external libraries. The `forEach` function is part of the ECMAScript standard, while the traditional for loop and for each loop are also standard JavaScript constructs.

**Special JS Features or Syntax**

There's no special feature or syntax used in this benchmark. All three test cases use standard JavaScript constructs to achieve their goals.

**Pros and Cons of Each Approach**

Here's a brief analysis of the pros and cons of each approach:

*   **Traditional For Loop**: Pros - simple, easy to understand, and works well for small arrays. Cons - can be slow due to overheads like array indexing and loop control.
*   **For Each Loop**: Pros - more concise than traditional for loops, but slower due to the use of `in` operators to iterate over object properties. Cons - less intuitive and error-prone than traditional for loops.
*   **ForEach Function**: Pros - concise, easy to read, and often faster than traditional for loops because it avoids overheads like array indexing and loop control. Cons - requires a callback function, which can be confusing if not used correctly.

**Benchmark Results**

The latest benchmark results show that the `forEach` function consistently outperforms both the traditional for loop and the for each loop, especially on modern browsers like Chrome 104.

| Test Name | Executions Per Second |
| --- | --- |
| foreach | 22843.99609375 |
| for each | 3595.048828125 |
| for | 650.5706176757812 |

**Other Alternatives**

Some other alternatives to these three approaches could include:

*   **Using a library like Lodash**: This can provide a more concise and expressive way to iterate over arrays, especially when working with larger datasets.
*   **Using a specialized array manipulation library**: Libraries like Ramda or Underscore.js provide optimized functions for common array operations, which can be faster than using vanilla JavaScript.

In conclusion, this benchmark provides valuable insights into the performance characteristics of different array iteration approaches in modern browsers. By understanding these differences, developers can choose the most suitable approach for their specific use cases.

Related benchmarks:

for/for in/forEach array sum (version: 0)

Comparing performance of: for vs for each vs forEach

Created: 2 years ago by: Registered User

Jump to the latest result

for

for each

forEach

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):