Benchmark: Array loop vs for of loop vs foreach vs map fixed

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map
for of

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark compares four different ways to iterate over an array in JavaScript:

1. `arr.forEach(someFn)`
2. `for (var i = 0; i < arr.length; i++) { someFn(arr[i]); }`
3. `arr.map(item => someFn(item))`
4. `for (const i of arr) { someFn(i); }`

The benchmark is comparing these four approaches for a specific use case: applying the function `someFn` to each element of an array, where `someFn` multiplies its input by 3 and then by 8.

**Library Used**

There is no library explicitly mentioned in the provided code. However, it's worth noting that the `map()` method uses a built-in JavaScript method, whereas the other approaches require manual iteration using loops.

**Special JS Features/Syntax**

The benchmark uses modern JavaScript features:

* Arrow functions (e.g., `item => someFn(item)`): Introduced in ECMAScript 2015 (ES6)
* `for...of` loop: Introduced in ECMAScript 2015 (ES6)

**Options Compared**

Here's a brief overview of each option:

1. **`arr.forEach(someFn)`**: Iterates over the array using the `forEach()` method, which calls the provided function for each element.
	* Pros: Concise and easy to read. Automatically handles arrays, but may not be as efficient as other approaches for large datasets.
	* Cons: May have performance issues if the array is very large or if the function is computationally expensive.
2. **`for (var i = 0; i < arr.length; i++) { someFn(arr[i]); }`**: Uses a traditional `for` loop to iterate over the array, accessing each element using its index.
	* Pros: Highly customizable and efficient for large datasets. However, it may require more code than other approaches.
	* Cons: More verbose than other options and may have issues with array indexing if not handled carefully.
3. **`arr.map(item => someFn(item))`**: Uses the `map()` method to create a new array by applying the provided function to each element of the original array.
	* Pros: Creates a new array with transformed elements, which can be useful for certain use cases.
	* Cons: Can be less efficient than other approaches if not necessary (e.g., it creates an additional array).
4. **`for (const i of arr) { someFn(i); }`**: Uses the `for...of` loop to iterate over the array, which is more concise and expressive than traditional `for` loops.
	* Pros: Easy to read and write. Automatically handles arrays with named properties.
	* Cons: May have performance issues if not optimized for large datasets.

**Other Considerations**

When choosing an iteration approach, consider factors such as:

* Performance: How many iterations will each approach require? Will the function be computationally expensive?
* Code readability and maintainability: Which approach is most concise and easy to understand?
* Array size: If the array is very large, which approach will be more efficient?

**Alternatives**

Other iteration approaches you might consider include:

* `Array.prototype.reduce()`: Used for reducing an array to a single value or creating an accumulator.
* `Array.prototype.every()` or `Array.prototype.some()`: Used for testing conditions on each element of the array.

Keep in mind that the performance differences between these approaches can be significant, especially when dealing with large datasets.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Windows

View result in a separate tab

Test name	Executions per second
foreach	104520.0 Ops/sec
for	6433.6 Ops/sec
map	12188.8 Ops/sec
for of	12773.0 Ops/sec

Related benchmarks:

Array loop vs for of loop vs foreach vs map fixed (version: 0)

fiixed for

Comparing performance of: foreach vs for vs map vs for of

Created: 2 years ago by: Guest

Jump to the latest result

foreach

for

map

for of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 3 days ago):