Benchmark: Array loop: forEach vs for vs map vs for of entries

Script Preparation code:

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

Tests:

forEach
arr.forEach(someFn)
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i], i); }
map
arr.map(someFn)
for of entries
for (const [x, i] of arr.entries()) { someFn(x, i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for
map
for of entries

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Mac OS X 10.15

View result in a separate tab

for

1.7M/s

forEach

244K/s

map

192K/s

for of entries

118K/s

View exact numbers

Test name	Executions per second
✓ for	1,744,566 Ops/sec
forEach	244,226 Ops/sec
map	192,247 Ops/sec
for of entries	117,583 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and the pros/cons of each approach.

**Benchmark Overview**

The benchmark tests four different ways to iterate over an array in JavaScript: `forEach`, `for` loop, `map`, and `for...of` loop with `entries()` method. The benchmark is designed to measure the performance of these loops on a large array (1000 elements).

**Benchmark Definition JSON**

The benchmark definition contains two parts:

1. **Script Preparation Code**: This code creates an empty array `arr` and populates it with 1000 elements using a nested loop. It also defines a function `someFn(x, i)` that takes two arguments: the current element `x` and its index `i`. The purpose of this function is not explicitly stated in the benchmark definition, but it's likely used to perform some operation on each array element.
2. **Html Preparation Code**: This section is empty, suggesting that the benchmark doesn't require any HTML setup or rendering.

**Individual Test Cases**

The test cases are defined as an array of objects, each containing:

1. **Benchmark Definition**: A string that specifies the loop to be tested (e.g., "arr.forEach(someFn)").
2. **Test Name**: A human-readable name for the test case (e.g., "forEach", "for", etc.).

**Comparison of Loop Approaches**

The benchmark compares four loop approaches:

1. `forEach`
2. `for` loop
3. `map`
4. `for...of` loop with `entries()` method

Here's a brief overview of each approach and their pros/cons:

a. **`forEach`**:
	* This loop iterates over the array elements in sequence, executing the callback function for each element.
	* Pros: Simple to implement, easy to read, and maintainable.
	* Cons: Can be slower than other approaches because it involves an additional method call ( `someFn(arr[i])` ) for each iteration.

b. **`for` loop**:
	* This traditional loop uses an index variable (`i`) to iterate over the array elements.
	* Pros: Fast, efficient, and well-supported by most JavaScript engines.
	* Cons: Can be less readable than other approaches, especially for complex loops.

c. **`map()`**:
	* This method returns a new array with the results of applying the provided function to each element in the original array.
	* Pros: Efficient and concise way to create a new array with transformed elements.
	* Cons: Can be slower than `for` loop or `forEach` because it creates a new array object.

d. **`for...of` loop with `entries()`**:
	* This loop uses the `entries()` method to iterate over both the index and value of each array element.
	* Pros: Concise, readable, and efficient way to access both index and value in a single iteration.
	* Cons: Not as widely supported as other approaches, and may require additional setup.

**Library Usage**

The benchmark uses the `someFn` function defined in the script preparation code. This function is not part of any external library, but its purpose seems to be demonstration-focused (i.e., testing the performance of different loop approaches).

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark that require specific knowledge or expertise.

In summary, the benchmark tests the performance of four loop approaches: `forEach`, `for` loop, `map`, and `for...of` loop with `entries()`. Each approach has its pros and cons, and the benchmark provides a concise way to compare their performance.

Array loop: forEach vs for vs map vs for of entries (version: 0)

Comparing performance of: `forEach vs for vs map vs for of entries`

Created: 5 years ago by: Guest

Go to the latest result

forEach

for

map

for of entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array loop: forEach vs for vs map vs for of entries (version: 0)

Comparing performance of: forEach vs for vs map vs for of entries

Created: 5 years ago by: Guest

Go to the latest result

forEach

for

map

for of entries

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: `forEach vs for vs map vs for of entries`