Benchmark: for-of-foreach - MeasureThat.net

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

Tests:

foeach
const array = generateTestArray(); array.forEach((x) => { x.r = x.a + x.b; });
forof
const array = generateTestArray(); for (const obj of array) { obj.r = obj.a + obj.b; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foeach
forof

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
foeach	26.9 Ops/sec
forof	40.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand what's being tested in the provided JSON benchmark.

**What is being tested?**

The benchmark tests two different ways of iterating over an array in JavaScript: `forEach` and `for...of`. Both methods are used to update a property (`r`) in each object within the array.

**Options compared**

The benchmark compares the performance of two approaches:

1. **`forEach` loop**: This method iterates over the array using a traditional `for` loop, but with a callback function that updates the `r` property of each object.
2. **`for...of` loop**: This method uses a more modern syntax to iterate over the array, where you can directly access properties and perform operations on them.

**Pros and Cons**

* **`forEach` loop**:
	+ Pros: widely supported, easy to read and write, allows for callback functions.
	+ Cons: generally slower than `for...of` loops due to the overhead of function calls.
* **`for...of` loop**:
	+ Pros: faster, more concise, and modern syntax makes it easier to understand.
	+ Cons: less widely supported in older browsers or environments.

**Library/Utility used**

In this benchmark, no external library is explicitly mentioned. However, the `generateTestArray()` function uses a bit of magic to create an array of 1 million objects with specific properties (`a`, `b`, and `r`). This function is likely included as part of the benchmark itself.

**Special JavaScript feature/Syntax**

The benchmark uses the `for...of` loop, which is a relatively modern syntax introduced in ECMAScript 2015 (ES6). It's supported in most modern browsers and Node.js versions. If you're using an older environment, you might need to use a polyfill or transpile your code to support this syntax.

**Other alternatives**

If you want to optimize the `forEach` loop, you could consider:

* Using a more efficient data structure, like a `Set` or a `Map`, instead of an array.
* Minimizing the number of iterations by using a more concise way to update the properties (e.g., destructuring assignment).
* Avoiding unnecessary function calls or closures.

For the `for...of` loop, you could consider:

* Using a similar array creation method, like `Array.from()` or a custom implementation.
* Exploring other modern iteration methods, like `reduce()` or `map()`, depending on your specific use case.

Related benchmarks:

for-of-foreach (version: 0)

Comparing performance of: foeach vs forof

Created: one year ago by: Guest

Jump to the latest result

foeach

forof

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