Benchmark: for vs foreach vs for..of vs for..of over entries with big number of elements

Script Preparation code:

var array = Array.from({length: 5000});
var t;

Tests:

for
var len = array.length; for (let i = 0; i < len; i++) { t = array[i]; }
foreach
array.forEach(function(v, i) { t = v; });
for..of
for (var v of array) { t = v; }
for..of over entries
for (var [i, v] of array.entries()) { t = v; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
foreach
for..of
for..of over entries

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 hours ago):

LLMs can make mistakes. Check important info.

The benchmark provided is designed to compare the performance of different looping constructs in JavaScript when iterating over an array with a large number of elements. Specifically, it tests four different approaches to looping: the traditional `for` loop, the `forEach` method, the `for..of` loop, and the `for..of` loop used in combination with the `entries()` method.

### Options Compared in the Benchmark

1. **for Loop**
   - **Definition**: This approach uses a traditional `for` loop that accesses elements via an index.
   - **Pros**: 
     - Generally, offers the best performance for iterating through large arrays.
     - Allows direct control over the index, which can be advantageous in certain algorithmic situations.
   - **Cons**: 
     - More verbose and may be less readable compared to higher-level looping constructs.
     - Requires manual management of the loop variable.

2. **forEach Method**
   - **Definition**: This is a built-in method of arrays in JavaScript that executes a provided function once for each array element.
   - **Pros**: 
     - More readable and concise than traditional `for` loops, as it abstracts away the loop mechanics.
     - Suitable for functional programming styles and can lead to cleaner, more declarative code.
   - **Cons**: 
     - Typically slower than the `for` loop, especially for large arrays, due to the overhead of function calls.
     - Cannot be easily exited from (e.g., using `break` or `continue`).

3. **for..of Loop**
   - **Definition**: This syntax allows iteration over iterable objects, such as arrays, directly giving access to the value of each element without needing to use indexes.
   - **Pros**: 
     - Easier to read and write than a traditional `for` loop.
     - Utilizes the iterable protocol, making it compatible with other iterable structures (like maps, sets, etc.).
   - **Cons**: 
     - Slightly less performant than the `for` loop, but usually better than `forEach`.
     - Does not provide direct access to indices, which may be needed in some scenarios.

4. **for..of over Entries**
   - **Definition**: This approach uses the `entries()` method, which returns an iterator with `[index, value]` pairs for each element in the array, and iterates over it using `for..of`.
   - **Pros**: 
     - Allows access to both the index and the value of each element in a readable manner.
     - Useful when both the key (or index) and value are needed during iteration.
   - **Cons**: 
     - Generally the least performant option among all tested due to the overhead of creating an iterator and handling index-value pairs.

### Benchmark Results Overview

The benchmark results show the Executions Per Second for each of the tests in a Firefox environment on macOS.

- The traditional `for` loop demonstrates the highest performance at **91,386.375 executions per second**, indicating that it is the fastest for large arrays.
- The `for..of` loop performs reasonably well with **22,667.41**, being better than both `forEach` and `for..of over entries`.
- `forEach` posts **20,913.73**, showcasing decent readability but lesser performance.
- The `for..of over entries` option is the slowest with **13,986.80**, primarily due to the overhead of managing both the index and value.

### Other Considerations and Alternatives

While the benchmark focuses on these specific looping constructs, JavaScript offers additional alternatives for iterating over arrays, such as:

- **map(), filter(), and reduce()**: These methods can transform or derive new data from arrays, and while they offer great power and succinctness, they generally come with a performance cost compared to traditional loops.
  
- **Classic while Loop**: Another basic looping construct that can be used but is more verbose and rarely outperforms the `for` loop.

- **Typed Arrays**: When dealing with numerical data, typed arrays can show improved performance due to lower overhead in memory handling and can be iterated using similar patterns as above.

In summary, the benchmark demonstrates that the traditional `for` loop consistently provides the best performance for large datasets in JavaScript, while the other constructs offer varying trade-offs in terms of readability and overhead. These insights can guide developers in selecting the appropriate looping strategy based on the needs of their specific use cases.

Latest run results:

Run details: (Test run date: 15 hours ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
for	91386.4 Ops/sec
foreach	20913.7 Ops/sec
for..of	22667.4 Ops/sec
for..of over entries	13986.8 Ops/sec

Related benchmarks:

for vs foreach vs for..of vs for..of over entries with big number of elements (version: 1)

Compare loop performance

Comparing performance of: for vs foreach vs for..of vs for..of over entries

Created: 15 hours ago by: Registered User

Jump to the latest result

for

foreach

for..of

for..of over entries

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 hours ago):