Benchmark: Foreach vs for-in vs for-of vs for

Script Preparation code:

var array = Array(100);
array.fill('asd');

function processArray(value) {}

Tests:

Foreach
array.forEach(value => processArray(value));
For-in
for (const key in array) { processArray(array[key]) }
For-of
for (const value of array.entries()) { processArray(value); }
For
for (let index = 0; index < array.length; ++index) { processArray(array[index]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Foreach
For-in
For-of
For

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Windows 7

View result in a separate tab

Test name	Executions per second
Foreach	95583.7 Ops/sec
For-in	45270.1 Ops/sec
For-of	101097.8 Ops/sec
For	36305.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmarking test case, where different approaches to iterate over an array are compared: `foreach`, `for-in`, `for-of`, and a traditional `for` loop.

**Tested Options**

1. **Foreach**: Uses the `forEach` method of the array, which iterates over each element in the array.
2. **For-in**: Uses a traditional `for-in` loop to iterate over the array's properties (in this case, the array is an object with one property: the entire array).
3. **For-of**: Uses the `for...of` loop, introduced in ECMAScript 2015, which allows iterating directly over iterable objects like arrays.
4. **Traditional For**: Uses a traditional `for` loop to iterate over the array's indices.

**Pros and Cons of Each Approach**

1. **Foreach**:
	* Pros: Simple and concise syntax.
	* Cons: Can be slower due to method call overhead.
2. **For-in**:
	* Pros: Flexibility in accessing array elements (e.g., using `array[key]`).
	* Cons: Can be slower due to property access overhead, and it's less intuitive for iterating over arrays specifically.
3. **For-of**:
	* Pros: Modern, concise syntax that's easy to read and write. It's also optimized for array iteration.
	* Cons: Requires ECMAScript 2015 support (or later).
4. **Traditional For**:
	* Pros: Well-established and widely supported syntax.
	* Cons: More verbose than the other options.

**Library Usage**

None of the test cases use any external libraries or dependencies.

**Special JS Features/Syntax**

1. The `for...of` loop uses a new, modern syntax introduced in ECMAScript 2015.
2. The `forEach` method is also a part of ECMAScript 2009 (ECMAScript 5).

**Alternative Approaches**

Other possible approaches to iterate over an array include:

1. Using `Array.prototype.map()`, which applies a function to each element in the array and returns a new array with the results.
2. Using `Array.prototype.reduce()`, which applies a function to each element in the array and accumulates a value.
3. Using a recursive approach, where each iteration calls itself with a smaller subset of the array.

These alternative approaches might be more suitable for certain use cases, but they may also introduce additional overhead or complexity compared to the traditional `for` loop or the modern `for...of` loop.

Related benchmarks:

Foreach vs for-in vs for-of vs for (version: 0)

Comparing performance of: Foreach vs For-in vs For-of vs For

Created: 2 years ago by: Registered User

Jump to the latest result

Foreach

For-in

For-of

For

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