Benchmark: The fastest way to iterate over arrays

Script Preparation code:

var objectSize = 1000000;
var iterations = 20;

var array = [];

for (var i = 0; i < objectSize; i++) {
    array[i] = `val${i}`;
}

Tests:

for loop
for (var i = 0; i < iterations; i++) { for (var key = 0; key < array.length; key++) { var k = array[key]; } }
for loop with length caching
for (var i = 0; i < iterations; i++) { var length = array.length; for (var key = 0; key < length; key++) { var k = array[key]; } }
for...of
for (var i = 0; i < iterations; i++) { for (var value of array) { var k = value; } }
for...in
for (var i = 0; i < iterations; i++) { for (var key in array) { var k = array[key]; } }
forEach
for (var i = 0; i < iterations; i++) { array.forEach((value) => { var k = value; }); }
map
for (var i = 0; i < iterations; i++) { array.map((value) => { var k = value; }); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
for loop with length caching
for...of
for...in
forEach
map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Linux

View result in a separate tab

Test name	Executions per second
for loop	48.7 Ops/sec
for loop with length caching	37.7 Ops/sec
for...of	7.8 Ops/sec
for...in	0.8 Ops/sec
forEach	9.6 Ops/sec
map	3.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test, designed to compare the performance of different loop constructs: `for`, `for` with length caching, `for...of`, `for...in`, `forEach`, and `map`. The test aims to identify the fastest way to iterate over an array.

**Options Compared**

The benchmark compares six different options:

1. **For Loop**: A traditional `for` loop that iterates over the array using a `key` variable.
2. **For Loop with Length Caching**: A `for` loop that caches the length of the array, reducing the number of iterations.
3. **For...of**: A new loop construct introduced in ECMAScript 2015 (ES6), which allows iterating over arrays and other iterable objects using a single expression.
4. **For...in**: Another old loop construct that iterates over the properties of an object (or array, in this case) using their property names as strings.
5. **ForEach**: A method on Array prototypes that applies a callback function to each element in the array.
6. **Map**: A method on Array prototypes that creates a new array with the results of applying a provided function to each element in the original array.

**Pros and Cons**

Here's a brief overview of the pros and cons of each option:

* **For Loop**:
	+ Pros: Simple, widely supported, and well-understood.
	+ Cons: Can be slow due to the overhead of incrementing the loop variable.
* **For Loop with Length Caching**:
	+ Pros: Reduces the number of iterations, potentially speeding up the loop.
	+ Cons: May not work correctly if the array length changes during iteration.
* **For...of**:
	+ Pros: New, modern construct that's designed for iteration over arrays and other iterables.
	+ Cons: Less well-supported than traditional loops, may have performance issues in older browsers or engines.
* **For...in**:
	+ Pros: Simple, widely supported (though not as efficient as `for` loops).
	+ Cons: May iterate over properties with names that aren't exactly what you expect (e.g., object prototype properties).
* **ForEach**:
	+ Pros: Simple, modern construct that's designed for array iteration.
	+ Cons: May have performance issues in older browsers or engines, and can be slower than traditional `for` loops due to the overhead of the method call.
* **Map**:
	+ Pros: Modern construct that creates a new array with transformed elements, reducing side effects.
	+ Cons: Can be slower than traditional `for` loops due to the overhead of creating a new array.

**Library and Special Features**

In this benchmark, none of the libraries are explicitly mentioned. However, some options rely on modern JavaScript features:

* **For...of**: This loop construct relies on the ECMAScript 2015 (ES6) specification.
* **ForEach**: This method on Array prototypes relies on the ECMAScript 2015 (ES6) specification.

**Other Considerations**

When choosing a loop construct, consider the following factors:

* **Performance**: If speed is critical, traditional `for` loops or `for...of` might be better choices.
* **Code Readability and Maintainability**: Modern constructs like `for...of`, `forEach`, and `map` can make code easier to understand and maintain.
* **Browser Support**: Older browsers may not support modern JavaScript features. If you need to support older browsers, choose more traditional loop constructs.

Overall, the benchmark suggests that `For...of` is one of the fastest options, followed closely by traditional `for` loops with length caching.

Related benchmarks:

The fastest way to iterate over arrays (version: 3)

Find the fastest way to iterate over arrays, compare: for loop, for loop with length caching, for...of, for...in, forEach and map.

Comparing performance of: for loop vs for loop with length caching vs for...of vs for...in vs forEach vs map

Created: 4 years ago by: Registered User

Jump to the latest result

for loop

for loop with length caching

for...of

for...in

forEach

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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