Benchmark: Looping with Index: forEach vs array.entries vs for of

Script Preparation code:

const arr = Array.from({length: 1000}, () => Math.floor(Math.random() * 40));

Tests:

forEach
arr.forEach((item, index) => console.log(item + index))
array.entries
for(var [index, item] of arr.entries()){ console.log(item + index); }
for
for( var index = 0; index < arr.length; index++ ){ console.log(arr[index] + index); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
array.entries
for

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 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	2453.3 Ops/sec
array.entries	2663.4 Ops/sec
for	2825.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 months ago):

LLMs can make mistakes. Check important info.

The benchmark presented on MeasureThat.net tests the performance of three different looping methods in JavaScript: `forEach`, `array.entries`, and the traditional `for` loop. Each method iterates over an array of 1000 randomly generated integers and logs the sum of each item and its index.

### Looping Methods Compared

1. **forEach**
   - **Benchmark Definition**: `arr.forEach((item, index) => console.log(item + index))`
   - **Description**: `forEach` is a higher-order function that executes a provided function once for each array element. It cannot be interrupted and does not return anything.
   - **Pros**:
     - More concise and easier to read.
     - Semantically expresses intention to perform an action on each element.
   - **Cons**:
     - Typically slower than traditional loops due to the overhead of function calls.
     - Cannot use `break` or `continue`.

2. **Array.entries**
   - **Benchmark Definition**: `for(var [index, item] of arr.entries()){ console.log(item + index); }`
   - **Description**: The `entries()` method returns a new Array Iterator object that contains the key/value pairs for each index in the array. Each key/value pair can be destructured in the `for...of` loop.
   - **Pros**:
     - Provides both the index and the value in a clean syntax using destructuring.
     - Maintains readability and expressiveness.
   - **Cons**:
     - Slightly slower than traditional `for` loops due to the creation of an iterator.
     - More overhead than simple array indexing.

3. **Traditional For Loop**
   - **Benchmark Definition**: `for( var index = 0; index < arr.length; index++ ){ console.log(arr[index] + index); }`
   - **Description**: The traditional `for` loop initializes a counter variable, checks a condition before each iteration, and increments the counter in each cycle.
   - **Pros**:
     - Generally the fastest option in performance as it has the least overhead.
     - Provides flexibility with early exit using `break` and ability to skip iterations with `continue`.
   - **Cons**:
     - Slightly less readable and maintains more potential for off-by-one errors or mistakes in the loop condition.

### Benchmark Results

The benchmark results show the performance (in terms of executions per second) of each method when tested on Safari 18:

- **`for` Loop**: 1770.32 executions/sec (fastest)
- **`array.entries`**: 1623.63 executions/sec
- **`forEach`**: 1553.49 executions/sec (slowest)

### Considerations and Alternatives

- **Readability vs Performance**: While functional methods like `forEach` and `array.entries` improve code readability, traditional loops usually outperform them in terms of speed. Evaluating the need for performance versus readability is crucial when choosing a loop.
  
- **Alternatives**: 
  - **`map`**: Creates a new array with the results of calling a provided function on every element. While it is also less performant for side effects like logging, it can be more useful for transformation tasks.
  - **`reduce`**: Useful for accumulating a single value from an array. While powerful, it may introduce complexity and less readability for simple iteration tasks.
  - **`for...of`**: Similar to the `for` loop technique but specifically for iterable objects. Can be clearer than index-based loops while leveraging iterator behavior.

This benchmark provides valuable insight into the trade-offs between code structure and execution speed, aiding engineers in making informed choices based on their project's specific needs.

Related benchmarks:

Looping with Index: forEach vs array.entries vs for of (version: 1)

Comparing performance of: forEach vs array.entries vs for

Created: 8 months ago by: Guest

Jump to the latest result

forEach

array.entries

for

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 months ago):