Benchmark: Array looping - for, Array.forEach, for-of, array.entries()

Script Preparation code:

var arr = [];

for( var cpt = 0; cpt < 1000; cpt++ ) {
  arr.push( Math.random() );
}

var someFn = function( item ) {
  return item * 3 + item / 5;
}

Tests:

Simple for loop - Access index and value
let total = 0; for( var i = 0, n = arr.length; i < n; i++ ) { total += i + arr[i]; }
Array.forEach - Access index and value
let total = 0; arr.forEach((value, i) => { total += i + value; });
for-of + Array.entries
let total = 0; for(const [i, value] of arr.entries()) { total += i + value; }
for-of - Access value only
let total = 0; for(const value of arr) { total += value; }
Simple for loop - Access value only
let total = 0; for( var i = 0, n = arr.length; i < n; i++ ) { total += arr[i]; }
Array.forEach - Access value only
let total = 0; arr.forEach((value) => { total += value; });

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

for-of - Access value only

796K/s

Array.forEach - Access value only

333K/s

Array.forEach - Access index and value

330K/s

for-of + Array.entries

262K/s

Simple for loop - Access value only

33K/s

Simple for loop - Access index and value

33K/s

Fastest: for-of - Access value only (24.3x faster)

View exact numbers

✓ for-of - Access value only: 796,011 ops/sec
• Array.forEach - Access value only: 332,740 ops/sec
• Array.forEach - Access index and value: 330,336 ops/sec
• for-of + Array.entries: 262,246 ops/sec
• Simple for loop - Access value only: 32,800 ops/sec
• Simple for loop - Access index and value: 32,725 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Simple for loop - Access index and value
Array.forEach - Access index and value
for-of + Array.entries
for-of - Access value only
Simple for loop - Access value only
Array.forEach - Access value only

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 5.1; rv:52.0) Gecko/20100101 Firefox/52.0

Browser/OS: Firefox 52 on Windows XP

View result in a separate tab

Simple for loop - Access value only

257K/s

Simple for loop - Access index and value

234K/s

Array.forEach - Access index and value

180K/s

Array.forEach - Access value only

176K/s

for-of - Access value only

14K/s

for-of + Array.entries

3K/s

View exact numbers

Test name	Executions per second
✓ Simple for loop - Access value only	256,695 Ops/sec
Simple for loop - Access index and value	234,033 Ops/sec
Array.forEach - Access index and value	180,379 Ops/sec
Array.forEach - Access value only	176,127 Ops/sec
for-of - Access value only	13,891 Ops/sec
for-of + Array.entries	3,079 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark tests different ways to iterate over an array in JavaScript: `for` loops with and without accessing both index and value, `Array.forEach()` with and without accessing both index and value, and `for-of` loops with and without accessing both index and value.

**Options Compared**

There are four options being compared:

1. **Simple for loop - Access value only**: This option uses a traditional `for` loop to iterate over the array, but only accesses the values.
2. **Simple for loop - Access index and value**: This option uses a traditional `for` loop to iterate over the array, accessing both the index and the value of each element.
3. **Array.forEach - Access value only**: This option uses the `Array.prototype.forEach()` method to iterate over the array, but only accesses the values.
4. **Array.forEach - Access index and value**: This option uses the `Array.prototype.forEach()` method to iterate over the array, accessing both the index and the value of each element.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Simple for loop - Access value only**:
	+ Pros: Fastest execution time in Firefox 52.
	+ Cons: Less readable code, as the index is not explicitly used.
* **Simple for loop - Access index and value**:
	+ Pros: More readable code, as both index and value are accessed.
	+ Cons: Generally slower than other options due to the explicit loop counter.
* **Array.forEach - Access value only**:
	+ Pros: More concise code, as the callback function only needs to access the value.
	+ Cons: Less control over the iteration process, as the array's length is not known beforehand.
* **Array.forEach - Access index and value**:
	+ Pros: Better performance than accessing values only, as it avoids unnecessary iterations.
	+ Cons: Requires a callback function with both `value` and `index` parameters.

**Library and Special JS Features**

There are no libraries used in this benchmark. However, the `Array.prototype.forEach()` method is a built-in JavaScript feature that allows iterating over arrays without manually looping through each element.

No special JavaScript features or syntax are required for these benchmarks.

**Other Alternatives**

Some other alternatives to iterate over arrays in JavaScript include:

* Using `for...of` loops with `Array.prototype.entries()`, which provides an array-like object containing the index and value of each element.
* Using `map()`, `filter()`, or `reduce()` methods, which perform operations on subsets of the array but can be slower than simple loops for large arrays.
* Using `setInterval()` or `setTimeout()` with a callback function to iterate over an array.

In conclusion, this benchmark provides valuable insights into the performance differences between various iteration methods in JavaScript. By understanding these pros and cons, developers can make informed decisions about which approach to use depending on their specific requirements and performance constraints.

Array looping - for, Array.forEach, for-of, array.entries() (version: 0)

Comparing performance of: `Simple for loop - Access index and value vs Array.forEach - Access index and value vs for-of + Array.entries vs for-of - Access value only vs Simple for loop - Access value only vs Array.forEach - Access value only`

Created: 2 years ago by: Guest

Go to the latest result

Simple for loop - Access index and value

Array.forEach - Access index and value

for-of + Array.entries

for-of - Access value only

Simple for loop - Access value only

Array.forEach - Access value only

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array looping - for, Array.forEach, for-of, array.entries() (version: 0)

Comparing performance of: Simple for loop - Access index and value vs Array.forEach - Access index and value vs for-of + Array.entries vs for-of - Access value only vs Simple for loop - Access value only vs Array.forEach - Access value only

Created: 2 years ago by: Guest

Go to the latest result

Simple for loop - Access index and value

Array.forEach - Access index and value

for-of + Array.entries

for-of - Access value only

Simple for loop - Access value only

Array.forEach - Access value only

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Simple for loop - Access index and value vs Array.forEach - Access index and value vs for-of + Array.entries vs for-of - Access value only vs Simple for loop - Access value only vs Array.forEach - Access value only`