Benchmark: Init array with fill map, vs for i loop

Script Preparation code:

var iterations = 10000;

Tests:

for
res = [] for (i = 0; i < iterations; i++) { res.push(i); }
fill and map
res = Array(iterations).fill(null).map((value, index) => index);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
fill and map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
for	3575.7 Ops/sec
fill and map	8796.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON aims to evaluate two different approaches to initializing an array in JavaScript. Specifically, it compares using a traditional `for` loop against a more modern approach using the `Array.fill` method in combination with `Array.map`.

### Options Compared

1. **Traditional `for` Loop**:
   - **Code**: 
     ```javascript
     res = [];
     for (i = 0; i < iterations; i++) {
       res.push(i);
     }
     ```
   - **Description**: This approach initializes an empty array and populates it by iterating from 0 to the specified number of `iterations` (10,000 in this case), pushing each index value into the array.

2. **`Array.fill` and `Array.map`**:
   - **Code**: 
     ```javascript
     res = Array(iterations).fill(null).map((value, index) => index);
     ```
   - **Description**: This modern approach first creates an array of a specified length (`iterations`) filled with `null` values, and then maps over this filled array to replace each `null` with the index value.

### Pros and Cons

**Traditional `for` Loop**:
- **Pros**:
  - Simple and straightforward to understand; familiar syntax.
  - Typically, it may allow for minor optimizations for non-iterable scenarios, as developers can optimize the loop logic as needed.
  
- **Cons**:
  - Performance may not be optimal, especially with larger arrays where the push operation can introduce overhead.
  - Less concise than modern JavaScript practices.

**`Array.fill` and `Array.map`**:
- **Pros**:
  - More concise and readable syntax, leveraging modern JavaScript features.
  - Can take advantage of optimizations within the JavaScript engine for array manipulations (like bulk operations).
  
- **Cons**:
  - May consume more memory during the fill phase due to the intermediate `null` values stored before mapping.
  - Familiarity with functional programming constructs like `map` may be a barrier for some developers not accustomed to this style.

### Benchmark Results

From the benchmark results:
- The `fill and map` approach has a higher execution rate of approximately 8,796 executions per second.
- The traditional `for` loop has a significantly lower execution rate of about 3,576 executions per second.

This data suggests that the modern `Array.fill` and `Array.map` method not only improves readability, but also outperforms the traditional loop in terms of speed in this specific context.

### Considerations

When choosing between these approaches, developers may want to consider:
- **Performance Requirements**: In scenarios where performance is critical, favoring the faster approach is wise.
- **Readability and Maintainability**: Code that is easy to understand and maintain can be more valuable than micro-optimizations, especially if performance differences are not significant.
- **Compatibility**: While modern features like `Array.fill` and `Array.map` are well-supported in most environments, developers should ensure that the target environment is compatible with these methods.

### Alternatives

Other alternatives for initializing arrays in JavaScript may include:
- **Using Array `from` Method**: 
  ```javascript
  res = Array.from({ length: iterations }, (_, index) => index);
  ```
  This is another modern method that creates an array directly from an iterable or array-like object, applying a mapping function for initialization.
  
- **Using the Spread Operator**:
  ```javascript
  res = [...Array(iterations).keys()];
  ```
  This uses the spread operator and the `keys()` method to create an array of keys from an array-like object, effectively creating an array of indexes.

Each method has its own advantages and may perform differently depending on the JavaScript engine and the specifics of the use case.

Related benchmarks:

Init array with fill map, vs for i loop (version: 0)

People tend to use array fil and then foreach, we know foreach is faster than a for loop, but is it also faster if you use array fill first?

Comparing performance of: for vs fill and map

Created: 6 months ago by: Guest

Jump to the latest result

for

fill and map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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