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; });

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

Test name	Executions per second
Simple for loop - Access index and value	234033.3 Ops/sec
Array.forEach - Access index and value	180378.6 Ops/sec
for-of + Array.entries	3078.7 Ops/sec
for-of - Access value only	13891.4 Ops/sec
Simple for loop - Access value only	256694.8 Ops/sec
Array.forEach - Access value only	176127.2 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.

Related benchmarks:

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: one year ago by: Guest

Jump 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

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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