Benchmark: Array loop vs for of loop vs foreach vs map (2)

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 (var i of arr) { someFn(arr[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

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

foreach

1.1M/s

for

463K/s

map

411K/s

for of

395K/s

View exact numbers

Test name	Executions per second
✓ foreach	1,146,699 Ops/sec
for	462,644 Ops/sec
map	410,604 Ops/sec
for of	395,135 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark defines four different approaches to iterate over an array:

1. `arr.forEach(someFn)`: Uses the `forEach` method to iterate over the array, calling `someFn` for each element.
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 and calling `someFn`.
3. `arr.map(item => someFn(item))`: Uses the `map` method to create a new array with transformed elements, where each transformation is applied using `someFn`.
4. `for (var i of arr) { someFn(arr[i]); }`: Uses an iterative syntax introduced in ECMAScript 2015 (`for...of`) to iterate over the array, accessing each element and calling `someFn`.

**Library**

None of the test cases use any external libraries.

**Special JS feature or syntax**

The test case using `for...of` syntax is a special feature introduced in ECMAScript 2015. This syntax allows iterating over arrays without needing an explicit index variable.

**Benchmark Comparison**

The four approaches have different performance characteristics:

* **forEach**: Uses the built-in `forEach` method, which is implemented in native code and optimized for performance.
* **Traditional For Loop**: Uses a traditional loop structure, which can be slower due to overhead from JavaScript engine optimizations.
* **Map**: Creates a new array with transformed elements, which requires additional memory allocation and copy operations.
* **For...of**: Uses the iterative syntax introduced in ECMAScript 2015, which is optimized for performance and has lower overhead compared to traditional loops.

**Pros and Cons**

Here's a brief summary of each approach:

* `forEach`:
	+ Pros: Fastest execution time, minimal overhead.
	+ Cons: Limited control over iteration order (e.g., for side effects).
* Traditional For Loop:
	+ Pros: Control over iteration order and indexing.
	+ Cons: May be slower due to overhead from JavaScript engine optimizations.
* Map:
	+ Pros: Easy to read and maintain, can be used with other array methods.
	+ Cons: Creates a new array, which can increase memory allocation time.
* For...of:
	+ Pros: Fastest execution time, low overhead, easy to read.
	+ Cons: Requires support for ECMAScript 2015 syntax.

**Other Alternatives**

Alternative approaches could include:

* Using `reduce()` or other aggregate methods instead of iterating over the array.
* Employing vectorization techniques (e.g., using SIMD instructions) for optimized array processing.
* Using native libraries like NumJS or SciPy for linear algebra and numerical computations.

However, these alternatives may not be as straightforward to implement and maintain as the four approaches used in this benchmark.

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

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

Created: 7 years ago by: Guest

Go to the latest result

foreach

for

map

for of

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 vs for of loop vs foreach vs map (2) (version: 0)

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

Created: 7 years ago by: Guest

Go to the latest result

foreach

for

map

for of

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`