Benchmark: Printing 1000 array elements, for vs for (with function call) vs foreach

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var array = new Array(1000);
let count = 1000;

function print(i) {
    console.log(array[i]);
}

Tests:

For
for (var i = 0; i < count; i++) { console.log(array[i]); }
For (with function call)
for (var i = 0; i < count; i++) { print(i); }
For Each (function)
array.forEach(print)
For Each (trivial lambda)
array.forEach((i) => print(i))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For
For (with function call)
For Each (function)
For Each (trivial lambda)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 29 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Linux

View result in a separate tab

Test name	Executions per second
For	547.7 Ops/sec
For (with function call)	515.7 Ops/sec
For Each (function)	1331068.6 Ops/sec
For Each (trivial lambda)	1326592.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 29 days ago):

LLMs can make mistakes. Check important info.

The benchmark from MeasureThat.net is aimed at testing the performance of different iteration approaches in JavaScript when printing elements from an array of 1000 elements. In this benchmark, the performance of four different approaches is compared:

1. **Standard for loop**
2. **For loop with a function call**
3. **Array forEach using a function reference**
4. **Array forEach using a trivial lambda (arrow function)**

### Benchmark Options

1. **For Loop**
   - **Code:** `for (var i = 0; i < count; i++) { console.log(array[i]); }`
   - **Pros:**
     - The classic `for` loop is generally the fastest approach, as it directly accesses array elements and has minimal overhead.
     - It allows for greater flexibility, such as easily modifying the loop index and terminating early.
   - **Cons:**
     - Requires additional boilerplate code (initialization, condition, increment), which may introduce potential for errors.

2. **For Loop with Function Call**
   - **Code:** `for (var i = 0; i < count; i++) { print(i); }`
   - **Pros:**
     - This version employs a designated function (`print(i)`) to log each element, promoting code reusability and separation of concerns.
   - **Cons:**
     - The function call introduces additional overhead, which slows down execution compared to the pure `for` loop. 
     - This approach may be less performant depending on how the JavaScript engine optimizes function calls.

3. **ForEach (Function Reference)**
   - **Code:** `array.forEach(print)`
   - **Pros:**
     - Cleaner syntax that simplifies the iteration process.
     - Encourages functional programming paradigms, improving readability.
   - **Cons:**
     - May perform slower than a simple `for` loop akin to the overhead seen in the for loop with function call, especially for large data sets.
     - Lacks the control inherent in traditional loops (e.g., early exits).

4. **ForEach (Trivial Lambda)**
   - **Code:** `array.forEach((i) => print(i))`
   - **Pros:**
     - Similar benefits to using a function reference but allows inline definition of the operation to take place on each element.
     - Enhances readability since the operation is directly associated with the iteration.
   - **Cons:**
     - The arrow function introduces additional overhead, comparable to using a clearly defined function.
     - The performance may be lesser than traditional loops due to the function creation overhead for each call.

### Performance Results

From the performance results, we can see that:

- The **Standard for loop** achieved the highest execution rate of approximately **547.73 executions per second**.
- The **For loop with a function call** is the slowest among the `for` variants at around **515.73 executions per second**, which demonstrates the impact of function call overhead.
- Among the `forEach` implementations, the traditional **function reference** method slightly outperformed the **trivial lambda** with **1331068.63** versus **1326592.88** executions per second.

### Other Considerations

While these are the tested approaches, other alternatives could include:

- **While Loop**: A basic while loop could be an alternative iteration method, providing similar performance but often less readability.
- **Recursion**: One could use a recursive approach, although it typically is less efficient in JavaScript due to function call stack limitations.
- **For...of Loop**: A more modern and readable iteration method that directly accesses iterable collections including arrays, with potentially favorable performance characteristics.

Understanding these differences can help in selecting the right iteration method based on performance requirements and code clarity. Each approach has trade-offs, and real-world performance can also vary based on the specific JavaScript engine optimizations in play.

Related benchmarks:

Printing 1000 array elements, for vs for (with function call) vs foreach (version: 1)

Comparing performance of: For vs For (with function call) vs For Each (function) vs For Each (trivial lambda)

Created: 29 days ago by: Guest

Jump to the latest result

For

For (with function call)

For Each (function)

For Each (trivial lambda)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 29 days ago):