Benchmark: Array creation for, map, foreach

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var elements = Array.from({length:100}).map(() => Math.floor(Math.random() * 1000));

Tests:

for loop
const result = []; for (let i = 0; i < elements.length; i++) { if (elements[i] % 5 === 0) { result.push(elements[i] * 2); } }
for of loop
const result = []; for (let element of elements) { if (element % 5 === 0) { result.push(element * 2); } }
forEach
const result = []; elements.filter(element => element % 5 === 0).forEach(element => result.push(element * 2));
map
const result = elements.filter(element => element % 5 === 0).map(element => element * 2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for loop
for of loop
forEach
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for loop	2835551.0 Ops/sec
for of loop	6612008.0 Ops/sec
forEach	5186379.5 Ops/sec
map	4636601.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark focuses on the performance of different approaches to processing arrays in JavaScript. Specifically, it compares four methods for iterating over an array of randomly generated integers and filtering and transforming its elements based on a specific condition (in this case, whether the integer is divisible by 5).

### Benchmark Options Compared

1. **For Loop**
   ```javascript
   const result = [];
   for (let i = 0; i < elements.length; i++) {
     if (elements[i] % 5 === 0) {
       result.push(elements[i] * 2);
     }
   }
   ```
   - **Description**: This traditional approach uses a classic for loop to iterate through each element by index. It conditionally pushes modified values to a result array.
   - **Pros**: 
     - Familiar syntax for many developers.
     - Potentially optimal performance, as it allows for precise control over iterations and conditions.
   - **Cons**: 
     - Increased chances for off-by-one errors.
     - Less readable for some compared to modern constructs.

2. **For-of Loop**
   ```javascript
   const result = [];
   for (let element of elements) {
     if (element % 5 === 0) {
       result.push(element * 2);
     }
   }
   ```
   - **Description**: This method leverages the `for..of` syntax introduced in ES6, which iterates over the elements directly rather than their indices.
   - **Pros**:
     - More readable and concise than the traditional for loop.
     - Reduces concerns about index management.
   - **Cons**:
     - Slight performance trade-off compared to the traditional for loop in certain scenarios.

3. **ForEach Method**
   ```javascript
   const result = [];
   elements.filter(element => element % 5 === 0).forEach(element => result.push(element * 2));
   ```
   - **Description**: This approach combines the `filter` method with `forEach`. It first creates a new array containing elements equal to or greater than zero, then applies a function to each element, pushing the modified values to the result array.
   - **Pros**:
     - Functional programming style encourages immutability.
     - Clean and expressive code.
   - **Cons**:
     - Potentially less performant due to creating intermediate arrays.
     - May be harder to read for developers unfamiliar with functional programming.

4. **Map Method**
   ```javascript
   const result = elements.filter(element => element % 5 === 0).map(element => element * 2);
   ```
   - **Description**: Similar to the forEach example, this method uses `filter` to create an array of valid elements and then applies the `map` method to transform these elements.
   - **Pros**:
     - Very expressive and concise.
     - Efficient when the intent is to transform a subset of the array.
   - **Cons**:
     - Like `forEach`, it also generates intermediate arrays.
     - The combined use of two methods can add a slight cognitive overhead compared to simpler structures.

### Benchmark Results Summary

The benchmark results show the throughput (executions per second) for each method on a specific setup (Opera 116 on macOS):

- **For-of Loop**: 6,651,923.5 executions/second
- **ForEach**: 4,032,374.5 executions/second
- **Map**: 4,013,953.75 executions/second
- **For Loop**: 2,285,184.5 executions/second

### Findings

- The **for-of loop** method exhibited the best performance in this setup, followed by the **forEach** and **map** methods, which performed similarly.
- Remarkably, the traditional **for loop**, which might typically be expected to perform well due to its low-level control, did not match the newer approaches in this case.

### Other Considerations

- **Readability vs Performance**: Developers should balance the need for performance with code readability. The broader the team’s skill set in functional programming, the more feasible it may be to adopt methods like `map` or `forEach`.
- **Use Cases**: The choice may also depend on specific use cases; for heavy computation with substantial datasets, the method’s performance becomes critical, while for smaller arrays, readability might take precedence.
- **Browser Variability**: Performance may vary across different JavaScript engines and browsers, which could impact the results in real-world scenarios.

### Alternatives

Other alternatives that could be explored include:

- **Reduce**: Combining filtering and mapping into a single operation, although often more complex and possibly less performant for large datasets.
- **While/Do-While Loops**: These can offer similar performance to traditional for loops but may lack the brevity and clarity of the `for-of` syntax.
- **Libraries**: Utilizing libraries like Lodash can provide more utility functions that may streamline operations but introduce additional overhead.

This benchmark has highlighted the trade-offs between various JavaScript iteration methods when processing arrays, providing meaningful insights for developers when making decisions on which approach to implement in their codebases.

Related benchmarks:

Array creation for, map, foreach (version: 1)

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

Created: 2 months ago by: Guest

Jump to the latest result

for loop

for of loop

forEach

map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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