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));

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 21 runs

Array for..of

112K/s

Set for of

112K/s

Set forEach

98K/s

Array for-loop

37K/s

Fastest: Array for..of (3.0x faster)

View exact numbers

✓ Array for..of: 112,463 ops/sec
• Set for of: 112,441 ops/sec
• Set forEach: 98,227 ops/sec
• Array for-loop: 36,994 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Set for of

145K/s

Array for..of

135K/s

Set forEach

134K/s

Array for-loop

46K/s

View exact numbers

Test name	Executions per second
✓ Set for of	145,458 Ops/sec
Array for..of	134,806 Ops/sec
Set forEach	133,667 Ops/sec
Array for-loop	45,595 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())`).

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

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

Go to the latest result

Array for-loop

Array for..of

Set for of

Set forEach

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 21 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Go to the latest result

Array for-loop

Array for..of

Set for of

Set forEach

Historical Performance Data aggregated from 21 community runs

Desktop Results:

Chrome 21 runs

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: `Array for-loop vs Array for..of vs Set for of vs Set forEach`