Benchmark: Performance of JavaScript .forEach vs for..of

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:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.forEach
for..of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.forEach	34.7 Ops/sec
for..of	34.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two different approaches for iterating over an array: the traditional `.forEach` method and the newer `for...of` loop.

**Options Compared**

Two options are compared:

1. **`.forEach`**: A traditional method for iterating over an array, where each element is passed to a callback function.
2. **`for...of`**: A new syntax introduced in ECMAScript 2015 (ES6) for iterating over arrays and other iterable objects.

**Pros and Cons**

* `.forEach`:
	+ Pros: widely supported, easy to implement, and has been around for a long time.
	+ Cons: can be slower due to the overhead of the callback function, and may not be as efficient in terms of memory usage.
* `for...of`:
	+ Pros: more efficient, faster execution speed, and reduced memory usage compared to `.forEach`.
	+ Cons: relatively new syntax, requires modern browsers or environments that support it.

**Library Usage**

None of the benchmark tests use a specific library. The test cases only involve built-in JavaScript features.

**Special JS Features/Syntax**

The `for...of` loop is a special feature introduced in ES6 (ECMAScript 2015) for iterating over arrays and other iterable objects. It provides a more concise way to iterate over collections of values without the need for explicit indexing or callbacks.

**Other Alternatives**

If you're interested in exploring other alternatives, here are a few:

1. **`.map()`**: While not designed specifically for iteration, `.map()` can be used to transform arrays by applying a callback function to each element.
2. **`reduce()`**: Another built-in JavaScript method that can be used for iterating over arrays, but it's primarily used for reducing the array to a single value.

**Benchmark Considerations**

When creating benchmarks like this one, consider the following:

* Use representative test cases that cover various scenarios and edge cases.
* Ensure that the benchmarking environment is consistent and controlled (e.g., same browser, OS, and hardware).
* Choose metrics that accurately measure performance, such as execution speed or memory usage.

By considering these factors, you can create a robust and informative benchmark that helps identify performance differences between different JavaScript iteration methods.

Related benchmarks:

Performance of JavaScript .forEach vs for..of (version: 0)

Comparing performance of: .forEach vs for..of

Created: one year ago by: Guest

Jump to the latest result

.forEach

for..of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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