Benchmark: Array foreach vs for..in

Script Preparation code:

var array = [];
for(let i = 0; i <= 100; i++) {
  array[i] = i;
}

Tests:

for in
let sum = 0; for (var sample in array) { sum += Number(sample); } console.log(sum);
foreach
let sum = 0; array.forEach((sample) => { sum += sample; }); console.log(sum);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for in
foreach

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; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Mac OS X 10.15

View result in a separate tab

foreach

322K/s

for in

248K/s

View exact numbers

Test name	Executions per second
✓ foreach	321,835 Ops/sec
for in	248,364 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark focuses on comparing two different methods for iterating over an array in JavaScript: the `for..in` loop and the `Array.prototype.forEach` method. Each approach has its characteristics, benefits, and drawbacks, which can significantly impact performance and behavior in various scenarios.

### Methods Compared

1. **for..in Loop**
   - **Code:**
     ```javascript
     let sum = 0;
     for (var sample in array) {
       sum += Number(sample);
     }
     console.log(sum);
     ```
   - **Description:**
     The `for..in` loop iterates over the enumerable properties of an object. In this context, it is being used to loop over the indices of the array, with `sample` representing each index.

2. **Array.prototype.forEach**
   - **Code:**
     ```javascript
     let sum = 0;
     array.forEach((sample) => {
       sum += sample;
     });
     console.log(sum);
     ```
   - **Description:**
     The `forEach` method is a built-in function of the Array prototype that executes a provided function once for each array element. Here, it computes the sum of the values in the array.

### Pros and Cons

**for..in Loop:**
- **Pros:**
  - Works on any object that has properties, not just arrays.
  - Can be conceptually simple to use for an initial understanding of object property iteration.
  
- **Cons:**
  - It is not recommended for arrays because it iterates over all enumerable properties—including inherited properties—leading to potential unexpected behaviors.
  - The variable `sample` in this case represents the index (as a string), not the actual value of the array, which can lead to errors if not processed correctly (e.g., `Number(sample)`).
  - Performance may vary depending on the number of properties in the object.

**Array.prototype.forEach:**
- **Pros:**
  - Specifically designed for array iteration, providing better clarity and safety.
  - Directly provides access to the value of each element, making it straightforward to sum the actual values in the array.
  - Implements the functional programming paradigm, which can lead to cleaner and more readable code.
  
- **Cons:**
  - It does not support early termination (e.g., via `break` or `return`), meaning it will always iterate through the entire array unless the function is designed to handle exits internally.
  - Slightly less performant than a simple `for` loop for large arrays in some cases (not compared here), as it has a function call overhead in each iteration.

### Other Considerations

When choosing between these two iteration methods, consider code readability and maintainability in addition to raw performance. The `forEach` method is generally favored in modern JavaScript for traversing arrays because it avoids the pitfalls of property enumeration found with `for..in`.

### Alternatives to Consider

1. **for Loop:**
   - A traditional `for` loop offers complete control over the iteration process and good performance for large arrays:
     ```javascript
     let sum = 0;
     for (let i = 0; i < array.length; i++) {
       sum += array[i];
     }
     ```

2. **for..of Loop (ES6):**
   - The `for..of` loop provides a clean syntax for iterating over iterable objects (including arrays):
     ```javascript
     let sum = 0;
     for (let sample of array) {
       sum += sample;
     }
     ```

Each of these methods has its use cases, and the choice of which to use should be guided by the specific requirements of performance, maintainability, and the JavaScript environment you are working within.

Array foreach vs for..in (version: 1)

Comparing performance of: `for in vs foreach`

Created: one year ago by: Registered User

Go to the latest result

for in

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Array foreach vs for..in (version: 1)

Comparing performance of: for in vs foreach

Created: one year ago by: Registered User

Go to the latest result

for in

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `for in vs foreach`