Benchmark: For loop vs <Array>.forEach()

Script Preparation code:

var array = Array(50000, (_, i) => i + 1);

Tests:

<Array>.forEach()
array.forEach((v, i) => `Item n°${i} : ${v}`);
For loop
for (let i = 0; i < array.length; i++) `Item n°${i} : ${array[i]}`;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
<Array>.forEach()
For loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0

Browser/OS: Firefox 114 on Windows

View result in a separate tab

Test name	Executions per second
<Array>.forEach()	4331051.0 Ops/sec
For loop	4185766.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros and cons of those approaches, and other considerations.

**Benchmark Overview**

The test case compares two JavaScript approaches for iterating over an array: the `forEach` method and a traditional `for` loop. The goal is to determine which approach is faster.

**Script Preparation Code**

The script preparation code creates an array with 50,000 elements, where each element is a function that returns its index plus one:
```javascript
var array = Array(50000, (_, i) => i + 1);
```
This array will be used as the input for both test cases.

**Test Cases**

There are two individual test cases:

### Test Case 1: `<Array>.forEach()`

The benchmark definition code for this test case is:
```javascript
array.forEach((v, i) => `Item n°${i} : ${v}`);
```
This code uses the `forEach` method to iterate over the array and logs a message for each element.

### Test Case 2: For loop

The benchmark definition code for this test case is:
```javascript
for (let i = 0; i < array.length; i++) {
  `Item n°${i} : ${array[i]}`;
}
```
This code uses a traditional `for` loop to iterate over the array and logs a message for each element.

**Options Compared**

The two test cases compare:

1. **Array iteration**: Both tests use an array as input, but they employ different iteration strategies.
2. **Loop control**: One test case uses `forEach`, which is a built-in array method that iterates over the array without requiring explicit loop control. The other test case uses a traditional `for` loop with manual index management.

**Pros and Cons of Each Approach**

### Array.forEach()

Pros:

* **Concise and readable code**: The `forEach` method is a simple and expressive way to iterate over an array.
* **Built-in functionality**: The `forEach` method is a standard part of the JavaScript language, making it widely supported.

Cons:

* **Limited control**: When using `forEach`, you have limited control over iteration variables (e.g., no access to the current index).
* **Potential performance overhead**: Some modern browsers may incur a small performance penalty when using `forEach` due to its method invocation.

### Traditional For Loop

Pros:

* **Explicit control**: With a traditional `for` loop, you have complete control over iteration variables and can optimize for specific use cases.
* **Low memory overhead**: Since the loop is explicit, there's no additional memory allocated for an iterator object (like with `forEach`).

Cons:

* **Verbose code**: Traditional loops require more code than `forEach`, making them less readable.
* **Error-prone**: With manual index management, it's easy to introduce off-by-one errors or other bugs.

**Library Used**

In both test cases, no specific libraries are used beyond the built-in JavaScript `Array` prototype and the `console.log` function.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in these test cases. The focus is on comparing iteration strategies rather than showcasing advanced language features.

**Alternatives**

For this type of benchmark, you might consider adding more test cases to evaluate:

* Using `map()` or `reduce()` instead of `forEach` for array operations.
* Employing Web Workers or parallel processing to compare performance on multi-core CPUs.
* Optimizing the array data structure (e.g., using sparse arrays or `Set` objects) to observe its impact on iteration performance.

These additional test cases would help provide a more comprehensive understanding of JavaScript's performance characteristics and allow for more informed decisions about code optimization strategies.

Related benchmarks:

For loop vs <Array>.forEach() (version: 0)

Comparing performance of: <Array>.forEach() vs For loop

Created: one year ago by: Guest

Jump to the latest result

<Array>.forEach()

For loop

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