Benchmark: for vs for ... of vs forEach vs map

Script Preparation code:

const array = Array.from({ length: 100 }, (_, i) => i)
const result = []

Tests:

for
const result = [] for (let i = 0; i < array.length; i++) { result.push(array[i] * 2) }
for ... of
const result = [] for (const value of array) { result.push(value * 2) }
forEach
const result = [] array.forEach((value) => { result.push(value * 2) })
map
const result = array.map((value) => value * 2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for ... of
forEach
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	1026475.8 Ops/sec
for ... of	4612938.0 Ops/sec
forEach	2843246.2 Ops/sec
map	1579745.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark represented in the provided JSON compares the performance of different JavaScript looping constructs when processing an array of numbers. The main focus of the benchmark is on how efficiently each method can double the values in the array. Here's a breakdown of what is being tested and a comparison of the different approaches.

### Tested Options
1. **for Loop**
   ```javascript
   const result = [];
   for (let i = 0; i < array.length; i++) {
       result.push(array[i] * 2);
   }
   ```

2. **for...of Loop**
   ```javascript
   const result = [];
   for (const value of array) {
       result.push(value * 2);
   }
   ```

3. **forEach Method**
   ```javascript
   const result = [];
   array.forEach((value) => {
       result.push(value * 2);
   });
   ```

4. **map Method**
   ```javascript
   const result = array.map((value) => value * 2);
   ```

### Performance Results
Based on the latest benchmark results, here are the `ExecutionsPerSecond` for each method:

- **for...of**: 5,117,230.5 executions/second
- **map**: 5,011,520.5 executions/second
- **forEach**: 3,403,448.5 executions/second
- **for**: 1,478,245.875 executions/second

### Pros and Cons

1. **for Loop**
   - **Pros**: Offers the best performance in this benchmark; allows for fine control over the iteration and index management.
   - **Cons**: More verbose and can lead to off-by-one errors if not coded carefully; requires manual index management.

2. **for...of Loop**
   - **Pros**: More concise than the traditional `for` loop and easier to read; provides direct access to the values without needing to manage indices.
   - **Cons**: Generally slower than traditional `for` loops in performance-critical scenarios.

3. **forEach Method**
   - **Pros**: Very readable and straightforward for array manipulations; encapsulates iteration logic within a function, enabling a functional style.
   - **Cons**: Typically slower than both `for` and `for...of` loops; does not support breaking out of the loop prematurely.

4. **map Method**
   - **Pros**: Highly readable and functional; directly returns a new array with the transformed elements, which can lead to cleaner code.
   - **Cons**: Like `forEach`, it can be less performant than traditional loops; creates a new array, which could be inefficient if you don't need to preserve the original.

### Other Considerations
- **Memory Usage**: Both `forEach` and `map` create new arrays (with `map` returning the result directly), which may lead to higher memory consumption compared to the traditional `for` loop and `for...of`, which can modify an existing array or variable.
- **Readability vs. Performance**: While performance is a key consideration, the choice of loop can also depend on the context, readability requirements, and team coding standards. For instance, in many situations, the improved clarity of `forEach` or `map` may justify the slight performance trade-off.
  
### Alternatives
Other alternatives for iterating over arrays in JavaScript include:
- **while loop**: Similar to the `for` loop, it provides a more manual approach but can be flexible for various iteration conditions.
- **do...while loop**: Another manual approach, ensuring at least one execution of the loop body.
- **reduce Method**: Although functionally different, it can also be used to transform arrays, potentially in a more declarative style than traditional loops, at the cost of performance and readability in some cases.

In summary, the benchmark highlights the performance characteristics of various JavaScript looping constructs and their respective use cases, catering to different preferences in coding style, performance needs, and readability.

Related benchmarks:

for vs for ... of vs forEach vs map (version: 1)

Compare loop performance

Comparing performance of: for vs for ... of vs forEach vs map

Created: 3 months ago by: Guest

Jump to the latest result

for

for ... of

forEach

map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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