Benchmark: for ... of vs Array.forEach vs for cycle

Script Preparation code:

var array = [1,2,3,4,5,6,7,8,9,10];

Tests:

for ... of
for (const element of array) { console.log(element); }
Array.forEach
array.forEach(function (element) { console.log(element); });
for cycle
for (let i = 0; i < array.length; ++i) { console.log(array[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for ... of
Array.forEach
for cycle

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
for ... of	12247.7 Ops/sec
Array.forEach	11902.4 Ops/sec
for cycle	27965.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Description**

The test compares three ways to iterate through an array in JavaScript: `for...of`, `Array.forEach`, and a traditional `for` loop with an index variable (`i`). The goal is to determine which approach is the fastest.

**Options Compared**

1. **For...of**: This syntax allows iterating over an array without explicitly indexing into it. It's a concise way to iterate, but its performance can be slower due to overhead from creating iterators.
2. **Array.forEach**: This method provides a callback function that's executed for each element in the array. It's widely used and has good performance, but requires more code than `for...of`.
3. **Traditional For Loop with Index Variable (i)**: This is a basic, efficient way to iterate through an array. However, it requires explicit indexing into the array, which can be error-prone.

**Pros and Cons**

* **For...of**: Pros:
	+ Concise syntax
	+ No need for explicit indexing
	+ Easy to use
	Cons:
	+ Potential performance overhead due to iterator creation
* **Array.forEach**: Pros:
	+ Well-established, widely supported method
	+ Provides a callback function for additional logic
	+ Good performance
Cons:
	+ Requires more code than `for...of`
* **Traditional For Loop with Index Variable (i)**: Pros:
	+ Efficient and low-overhead
	+ Explicit indexing allows for better control
	Cons:
	+ Error-prone due to index management

**Libraries Used**

None explicitly mentioned in the benchmark definition. However, `Array.forEach` uses the built-in JavaScript Array prototype.

**Special JS Features or Syntax**

* None mentioned explicitly, but it's worth noting that the use of `for...of` requires a modern JavaScript environment (ES6+).

**Other Alternatives**

For iterating through arrays, other options exist, such as:

1. **Array.prototype.map()**: Creates a new array with transformed values.
2. **Array.prototype.filter()**: Returns a new array with filtered elements.
3. **For...in**: Iterates over the properties of an object (not arrays).

In terms of benchmarking and performance comparison, MeasureThat.net is a unique tool that allows users to create and run JavaScript microbenchmarks.

Keep in mind that benchmark results can vary depending on specific use cases, hardware, and software environments. These explanations are intended to provide general insights into the options being compared.

Related benchmarks:

for ... of vs Array.forEach vs for cycle (version: 0)

Compare how to quickly iterate through array

Comparing performance of: for ... of vs Array.forEach vs for cycle

Created: 5 years ago by: Guest

Jump to the latest result

for ... of

Array.forEach

for cycle

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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