Benchmark: Array for vs Array for of vs Set for of vs Set forEach * 100

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

window.fn = function fn() {}
window.arr = new Array(100).fill(0).map((x, i) => i.toString());
window.set = new Set(arr);

Tests:

Array for-loop
for(i=0, l = arr.length; i<l; i++){ fn(arr[i]); }
Array for..of
for (let value of arr) { fn(value); }
Set for of
for (let value of set) { fn(value); }
Set forEach
set.forEach(value => fn(value));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array for-loop
Array for..of
Set for of
Set forEach

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/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array for-loop	45595.4 Ops/sec
Array for..of	134806.2 Ops/sec
Set for of	145458.3 Ops/sec
Set forEach	133667.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided JavaScript microbenchmark on MeasureThat.net.

**Benchmark Overview**

The benchmark compares four different approaches to iterate over an array and set in JavaScript:

1. **Native Loops**: Using traditional `for` loops with indexing (`arr[i]`) or iteration (`i`).
2. **`for...of` loop**: A more modern approach using the `for...of` loop, which allows iterating directly over arrays and sets.
3. **`Set.forEach()` method**: Iterating over a set using its `forEach()` method.

**Options Compared**

The benchmark tests each of these options to determine which one is the fastest for execution per second.

**Pros and Cons of Each Approach:**

1. **Native Loops**:
	* Pros: Generally faster, more familiar, and widely supported.
	* Cons: Can be verbose, prone to errors due to indexing issues, and less readable.
2. **`for...of` loop**:
	* Pros: More modern, concise, and readable. Less prone to indexing issues.
	* Cons: Requires support for `for...of` loops in older browsers or environments.
3. **`Set.forEach()` method**:
	* Pros: Elegant, concise, and easy to read. Less prone to errors due to indexing issues.
	* Cons: May not be as fast as native loops or `for...of` loops, especially for large sets.

**Library Usage**

The benchmark uses the `Array.prototype.map()` method to create a new array with 100 elements. The set is created using an arrow function that maps over the array.

**Special JavaScript Features/Syntax**

The benchmark uses modern JavaScript features like:

* **Arrow functions**: Used in the `Set` creation and in the loop bodies.
* **Template literals**: Used in the initialization of the `arr` variable (`new Array(100).fill(0).map((x, i) => i.toString())`).

Related benchmarks:

Array for vs Array for of vs Set for of vs Set forEach * 100 (version: 0)

Testing the difference between native loops and find()

Comparing performance of: Array for-loop vs Array for..of vs Set for of vs Set forEach

Created: 3 years ago by: Guest

Jump to the latest result

Array for-loop

Array for..of

Set for of

Set forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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