Benchmark: Counting items in an array ... for vs foreach vs for of

Script Preparation code:

var arr = [];
for (var i = 0; i < 1000000; i++) {
    arr[i] = i % 1000
}

Tests:

For
const countObj = {} for (let i = 0; i < arr.length; i++) { const value = arr[i] countObj[value] = (countObj[value] || 0) + 1 }
Foreach
const countObj = {} arr.forEach(value => { countObj[value] = (countObj[value] || 0) + 1 })
for ... of
const countObj = {} for (let value of arr) { countObj[value] = (countObj[value] || 0) + 1 }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For
Foreach
for ... of

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark test and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark tests three ways of iterating over an array in JavaScript: traditional `for` loop, `foreach`, and `for...of`. The test also measures the performance of accessing an object outside the loop scope.

**Script Preparation Code**

The script preparation code creates a large array `arr` with 1 million elements, each assigned a unique value modulo 1000. This is done using a traditional `for` loop.

**Html Preparation Code**

There is no HTML preparation code provided, which means the benchmark only measures the performance of JavaScript execution without considering any DOM-related overhead.

**Individual Test Cases**

The three test cases use different iteration methods:

1. **For**: A traditional `for` loop is used to iterate over the array.
```javascript
for (let i = 0; i < arr.length; i++) {
  const value = arr[i];
  countObj[value] = (countObj[value] || 0) + 1;
}
```
Pros: Simple and efficient, as it avoids the overhead of function calls.
Cons: Can be slower for large arrays due to the need to increment the loop variable.

2. **Foreach**: The `foreach` method is used to iterate over the array, which is a more modern and concise way of iterating.
```javascript
arr.forEach(value => {
  countObj[value] = (countObj[value] || 0) + 1;
});
```
Pros: More concise and expressive, as it avoids the need to manage loop variables.
Cons: Can be slower than traditional `for` loops due to the overhead of function calls.

3. **For...of**: A new iteration method introduced in ECMAScript 2015, which uses a `for...of` loop to iterate over arrays.
```javascript
for (let value of arr) {
  countObj[value] = (countObj[value] || 0) + 1;
}
```
Pros: More concise and expressive than traditional `for` loops, as it eliminates the need to manage loop variables.
Cons: May be slower due to the overhead of this new iteration method.

**Library Usage**

None of the test cases use any external libraries, which means the benchmark is measuring only JavaScript execution.

**Special JS Features or Syntax**

The benchmark uses some modern JavaScript features:

* `const` and `let` declarations for variable scope management.
* Arrow functions (`=>`) in the `foreach` method.
* The `for...of` loop syntax.

These features are not mandatory, but they demonstrate the use of modern JavaScript features in a performance-critical context.

**Alternatives**

Other alternatives to these iteration methods include:

* Using `Array.prototype.forEach()` or `Array.prototype.forEachIndexed()`, which provide similar functionality with slightly different naming and signature.
* Implementing custom iteration loops using recursive functions or iterative algorithms.
* Using native array methods like `map()`, `filter()`, or `reduce()`, which can be optimized by the browser engine.

However, these alternatives may have varying degrees of performance impact, depending on the specific use case and implementation details.

Latest run results:

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

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

Browser/OS: Chrome 96 on Windows

View result in a separate tab

Test name	Executions per second
For	7.2 Ops/sec
Foreach	67.2 Ops/sec
for ... of	111.5 Ops/sec

Related benchmarks:

Counting items in an array ... for vs foreach vs for of (version: 0)

Testing performance getting and setting an object outside of the for loop scope

Comparing performance of: For vs Foreach vs for ... of

Created: 2 years ago by: Guest

Jump to the latest result

For

Foreach

for ... of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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