Benchmark: js forEach vs for..of

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000; i++) {
      arr[i] = i;
    }
  
    function someFn(i) {
      return i * 3 * 8;
    }

Tests:

forEach
arr.forEach(function (item){ someFn(item); })
for..of
for (const element of arr) { someFn(element); }

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: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_7_8 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 16 on iOS 16.7.8

View result in a separate tab

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

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

LLMs can make mistakes. Check important info.

Let's break down the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches: using `forEach` and using a traditional `for` loop with `of`. The script preparation code creates an array of 1000 elements, each initialized with its index. It also defines a function `someFn(i)` that takes an element as input and returns its result.

**Options Compared**

The benchmark compares two options:

1. **forEach**: Uses the `forEach` method to iterate over the array, calling `someFn(item)` for each element.
2. **for..of**: Uses a traditional `for` loop with the `of` clause to iterate over the array, calling `someFn(element)` for each element.

**Pros and Cons of Each Approach**

**ForEach:**

Pros:

* Concise and readable syntax
* Easy to understand and maintain

Cons:

1. Can be slower due to method call overhead
2. May have additional memory allocations or copies of the function argument

**For..of:**

Pros:

1. Often faster than `forEach` due to reduced method call overhead
2. Can be more efficient in terms of memory allocation and copying of arguments

Cons:

1. Less readable and less intuitive syntax for some developers
2. May require additional setup or planning for complex iteration scenarios

**Other Considerations**

* The benchmark is run on a Mobile Safari 16 browser on an iPhone, which may have specific performance characteristics.
* The execution frequency per second (ExecutionsPerSecond) is an important metric to consider when evaluating the performance of each approach.

**Library Used**

The `forEach` method and the `for...of` loop are built-in JavaScript features, so no libraries are used in this benchmark.

**Special JS Features/Syntax**

None mentioned explicitly, but it's worth noting that `for...of` is a relatively modern feature introduced in ECMAScript 2015 (ES6). If you're targeting older browsers or environments, you may need to use alternative approaches.

**Alternative Approaches**

Other alternatives for iterating over arrays include:

* Using `Array.prototype.forEach.call()` or `Array.prototype.map()`
* Implementing a custom iterator using `Array.prototype[Symbol.iterator]`
* Using third-party libraries like Lodash or Ramda

Keep in mind that the choice of iteration approach depends on your specific use case, performance requirements, and compatibility constraints.

Related benchmarks:

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

Comparing performance of: forEach vs for..of

Created: 4 years 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):