Benchmark: Array for...of vs foreach vs map

Script Preparation code:

var arr = [];

for (var i = 0; i < 1000; i++) {
  arr.push(i);
}
  
function someFn(i) {
  return i * 3 * 8;
}

Tests:

foreach
arr.forEach(function (item){ someFn(item); })
for
for (var i of arr) { someFn(i); }
map
arr.map(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark measures the performance of three different ways to iterate over an array in JavaScript:

1. `Array.prototype.forEach()`: This method calls a function once for each element in the array.
2. `For...of loop` (also known as "iteration syntax"): Introduced in ECMAScript 2015, this loop iterates over arrays using an iterator object.
3. `Array.prototype.map()` method: This method creates a new array by performing a transformation on each element of the original array.

**Options Compared**

The benchmark compares the performance of these three options:

* **`forEach()`**: Iterating over the array using the `forEach()` method, which calls the provided function once for each element.
* **For...of loop**: Iterating over the array using a traditional for loop with an iterator variable (`var i = 0; while (i < arr.length) { ... }` is not used instead, so we use the For-of loop instead).
* **Map() method**: Using the `map()` method to create a new array by applying the transformation function to each element.

**Pros and Cons**

Here are some pros and cons for each option:

* **`forEach()`**:
	+ Pros: Easy to read and write, no need to declare an iterator variable.
	+ Cons: Can be less performant than other options due to the overhead of calling a separate function for each element.
* **For...of loop**: 
	+ Pros: Fast and efficient, as it avoids the overhead of method calls. However, can be more verbose than `forEach()`.
	+ Cons: Requires manual iteration variable management.
* **Map() method**:
	+ Pros: Can be more memory-efficient than using a traditional for loop or `forEach()` since it creates a new array without modifying the original one.
	+ Cons: Creates a new array with additional overhead, and can be slower due to the extra function call.

**Library Used**

There is no explicit library used in this benchmark. However, the `someFn` function used as part of each iteration is likely a custom function that performs some operation on the element.

**Special JS Feature or Syntax**

The For...of loop syntax (`for (var i of arr) { ... }`) is a new feature introduced in ECMAScript 2015. It allows iterating over arrays without declaring an iterator variable.

**Other Alternatives**

Some other alternatives to iterate over arrays include:

* **Traditional for loops**: `for (var i = 0; i < arr.length; i++) { ... }`
* **`Array.prototype.entries()` method**: Returns an array of key-value pairs containing the index and value of each element in the array. Can be used with a traditional for loop or `forEach()`.

In summary, this benchmark measures the performance of three common ways to iterate over arrays in JavaScript: `forEach()`, For...of loop, and Map() method. The results can help developers choose the most efficient approach depending on their specific use case.

Related benchmarks:

Array for...of vs foreach vs map (version: 0)

Comparing performance of: foreach vs for vs map

Created: 6 years ago by: Guest

Jump to the latest result

foreach

for

map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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