Benchmark: for..of vs forEach flo

Script Preparation code:

arr1 = [[1,2,3],[1,2,3],[1,2,3]]

Tests:

for..of
result = [] for(const arr of arr1) { for (const num of arr) { if (num === 2) { result.push(num) } } }
for each
result = [] arr1.forEach((arr) => { arr.forEach((num) => { if(num === 2) { result.push(num) } }) })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for..of
for each

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
for..of	648912.6 Ops/sec
for each	709773.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the JavaScript microbenchmark test case on MeasureThat.net.

**What is being tested?**

The benchmark is comparing two approaches: `for...of` loop and the traditional `forEach` method, specifically in the context of iterating over an array and checking if a specific value (in this case, 2) exists within it. The goal is to determine which approach performs better.

**Options compared:**

1. **For...of loop**: This is a modern JavaScript loop that allows you to iterate over arrays and iterables using the `of` keyword.
2. **Traditional `forEach` method**: This is an older, more traditional way of iterating over arrays using a callback function.

**Pros and Cons:**

* **For...of loop**:
	+ Pros:
		- More readable and concise code
		- Less boilerplate code
		- Can be faster due to the reduced overhead of function calls
	+ Cons:
		- May not work as expected in older browsers or environments that don't support `for...of`
* **Traditional `forEach` method**:
	+ Pros:
		- Works in all browsers and environments
		- Well-established and widely supported
	+ Cons:
		- More verbose code
		- May be slower due to the overhead of function calls

**Library/Function used:**

In this benchmark, neither of the loop methods uses a library or external function. The focus is on comparing the performance of the two loop approaches itself.

**Special JS feature/syntax:**

There are no special JavaScript features or syntaxes being tested in this benchmark. It's purely focused on comparing the performance of two common loop constructs.

**Other alternatives:**

If you were to modify this benchmark, alternative loop methods could be compared, such as:

* `while` loop
* `for` loop with an index variable
* Array.prototype.reduce()
* Array.prototype.every()

However, these alternatives might not provide a direct comparison to the `for...of` and `forEach` methods, so they might not be suitable for this specific benchmark.

**Benchmark preparation code:**

The provided script preparation code creates an array `arr1` with three nested arrays, which is used as input for both loop methods. The HTML preparation code is empty, indicating that no HTML-related setup is needed for this benchmark.

In summary, this benchmark compares the performance of two common JavaScript loop approaches: `for...of` and traditional `forEach`. While there are some pros and cons to each approach, the `for...of` method tends to be more readable and concise, but may not work in older environments.

Related benchmarks:

for..of vs forEach flo (version: 0)

Comparing performance of: for..of vs for each

Created: 4 years ago by: Guest

Jump to the latest result

for..of

for each

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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