Benchmark: Array forEach vs map vs for-of vs for

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(function (item){ someFn(item); })
for with cached length
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(item => someFn(item))
for of
for (let item of arr) { someFn(item); }
for
for (var i = 0; i < arr.length; i++) { someFn(arr[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for with cached length
map
for of
for

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Linux

View result in a separate tab

Test name	Executions per second
foreach	12037.0 Ops/sec
for with cached length	6441.1 Ops/sec
map	10681.3 Ops/sec
for of	12704.8 Ops/sec
for	4365.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark defines an array of 1000 elements, each containing a function `someFn` that takes an integer `i` as input and returns `i * 3 * 8`. This is used to create a simple microbenchmarking test.

**Test Cases**

There are four test cases, each using a different approach to iterate over the array:

1. **foreach**: Uses the `forEach` method, which calls the provided function for each element in the array.
2. **for with cached length**: Uses a traditional `for` loop with a cached value of `arr.length`, allowing the browser to optimize the loop by caching the length of the array.
3. **map**: Uses the `map` method, which creates a new array with the results of applying the provided function to each element in the original array.
4. **for of**: Uses the `for...of` loop, which is a modern iteration syntax that allows iterating over arrays without the need for explicit indexing.

**Comparison and Pros/Cons**

The test cases are designed to compare the performance of different iteration methods. Here's a brief summary:

* **foreach**:
	+ Pros: Simple to implement, widely supported.
	+ Cons: May involve more overhead due to function calls.
* **for with cached length**:
	+ Pros: Optimized loop, can take advantage of browser caching.
	+ Cons: Requires manual management of the loop variable and length cache.
* **map**:
	+ Pros: Creates a new array, allowing for easy iteration and transformation.
	+ Cons: May incur additional memory allocations and copies.
* **for of**:
	+ Pros: Modern syntax, efficient iteration, and reduced overhead.
	+ Cons: Requires support for `for...of` in the target browser.

**Library Usage**

None of the test cases rely on external libraries or frameworks. The benchmark is self-contained and uses only built-in JavaScript features.

**Special JS Features/Syntax**

Only one feature is used in this benchmark:

* **for...of**: A modern iteration syntax introduced in ECMAScript 2015 (ES6).

Now, let's discuss other alternatives:

* Other iteration methods, such as `while` loops or recursion, are not tested here.
* Using `Promise.all()` or similar constructs for parallelization is not applicable to this simple array iteration benchmark.

Keep in mind that the specific test cases and benchmark settings may influence the results.

Related benchmarks:

Array forEach vs map vs for-of vs for (version: 0)

Comparing performance of: foreach vs for with cached length vs map vs for of vs for

Created: 3 years ago by: Guest

Jump to the latest result

foreach

for with cached length

map

for of

for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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