Benchmark: Array fill vs loop

Script Preparation code:

var iterations = 10000;

Tests:

for
const array = []; for (i = 0; i < iterations; i++) { array[i] = i; }
fill
Array(iterations).fill('')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
fill

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_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for	75854.4 Ops/sec
fill	190831.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The JSON benchmark you provided tests the performance of two different ways of populating an array in JavaScript: using a `for` loop and using the `Array.fill()` method.

### Benchmark Details

**Name:** Array fill vs loop  
**Script Preparation Code:** A variable `iterations` is defined with a value of 10,000, which means that both methods will attempt to populate an array with 10,000 elements.

### Individual Test Cases

1. **For Loop**: 
   - **Benchmark Definition**: 
     ```javascript
     const array = [];
     for (i = 0; i < iterations; i++) {
       array[i] = i;
     }
     ```
   - **Test Name**: "for"
   - **Description**: This approach initializes an empty array and uses a `for` loop to fill in the array. Each index `i` from 0 to `iterations-1` is assigned to the corresponding position in the array.

**Pros**:
   - Very flexible: You have control over the contents being inserted.
   - Familiar and straightforward for developers.

**Cons**:
   - Might be less optimized compared to higher-level methods, especially for larger datasets or more complex operations.

2. **Array.fill()**:
   - **Benchmark Definition**: 
     ```javascript
     Array(iterations).fill('')
     ```
   - **Test Name**: "fill"
   - **Description**: This method creates a new array of a specified length (`iterations`) and fills every element in that array with an empty string (`''`).

**Pros**:
   - Concise: The code is shorter and more readable, targeting the specific action of filling an array.
   - May internally utilize optimizations in JavaScript engines to perform better for large arrays.

**Cons**:
   - Less flexible: You are filling the array with a single specified value, making it less versatile for other use cases.
   - `<Array>.fill()` can be less intuitive than a traditional loop for those unfamiliar with this method.

### Benchmark Results

- **Fill Method**:
  - **Executions Per Second**: 190,831.83
- **For Loop Method**:
  - **Executions Per Second**: 75,854.38

From the results, the `Array.fill()` method outperforms the `for` loop in executing the same operation. This indicates that `Array.fill()` may leverage internal optimizations that make it faster for filling arrays.

### Other Considerations

When considering performance in array handling, using the built-in array methods like `Array.fill()` is generally recommended due to potential optimizations by the JavaScript engine. However, traditional loops might still be more appropriate for complex operations that require conditional logic or data processing.

### Alternatives

Other alternatives for populating arrays in JavaScript include:

- **Array.from()**: You can create a new array and populate it based on a mapping function or iterable.
  ```javascript
  Array.from({ length: iterations }, (_, i) => i);
  ```
- **Map Method**: If you start from an existing array, you can use the `map()` function to transform it.
- **Spread Operator**: For small arrays, you can simply use the spread operator within an array literal.

Each of these methods comes with its own pros and cons related to readability, flexibility, and potential performance, depending on the specific case you are dealing with.

Related benchmarks:

Array fill vs loop (version: 1)

Comparing performance of: for vs fill

Created: one year ago by: Guest

Jump to the latest result

for

fill

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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