Benchmark: Array.from vs Array.fill (debugged 2)

Tests:

from
let n = 10000, length = 50 const result = [] for (let i = 0; i < n; ++i) { result.push(Array.from({length:length}).map((_, i) => i + 1)) }
fill
let n = 10000, length = 50 const result = [] for (let i = 0; i < n; ++i) { result.push(Array(length).fill().map((_, i) => i + 1)) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
from
fill

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
from	87.9 Ops/sec
fill	72.4 Ops/sec

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

LLMs can make mistakes. Check important info.

In this benchmark, two different methods of creating arrays in JavaScript are compared: `Array.from` and `Array.fill`. The benchmark identity is encapsulated in the name "Array.from vs Array.fill".

### Compared Options

1. **Array.from**: 
   - **Code**: 
     ```javascript
     result.push(Array.from({length: length}).map((_, i) => i + 1));
     ```
   - **Description**: `Array.from` creates a new array instance from an array-like or iterable object. In this case, it takes an object with a specified length and maps its indices to generate a new array containing numbers from 1 to 50.

2. **Array.fill**:
   - **Code**: 
     ```javascript
     result.push(Array(length).fill().map((_, i) => i + 1));
     ```
   - **Description**: `Array.fill` creates a new array with a specified length initialized to `undefined`, and then fills it with the mapped values from 1 to 50 using the map function.

### Pros and Cons

#### Array.from
- **Pros**: 
  - Offers flexibility by taking any iterable or array-like object, making it versatile.
  - General-purpose use case where you can convert a variety of objects into arrays.

- **Cons**: 
  - Typically has slightly more overhead compared to `Array.fill` because it has to process the iterable provided (even if that is just an object with a length property).

#### Array.fill
- **Pros**: 
  - Generally faster in this context since it directly creates an array and fills it with `undefined` before applying mapping.
  - Simplicity in code when the intent is just to create an array of a certain size without dealing with other iterable structures.

- **Cons**: 
  - Less flexible than `Array.from`, as it can only generate an array of a certain size, making it less versatile for various use cases.

### Other Considerations
- **Performance Differences**: 
  - The benchmark results indicate that `Array.from` executes approximately 87.86 times per second, while `Array.fill` executes about 72.43 times per second. In this case, `Array.from` performed better. This can vary based on the JavaScript engine, environment, and JavaScript implementation details.
  
- **Readability and Maintainability**: Depending on the context, one method may be more readable than the other, especially for developers familiar with certain idioms. Choosing the appropriate method can enhance code maintainability.

### Alternatives
1. **Using a for loop**:
   - A more traditional approach to populating an array could simply involve initializing an empty array and using a loop to push values into it, such as:
     ```javascript
     const result = [];
     for (let i = 1; i <= length; i++) {
         result.push(i);
     }
     ```

2. **Generator functions**:
   - Leveraging generator functions can create a more dynamic array population:
     ```javascript
     function* generateNumbers(length) {
         for (let i = 1; i <= length; i++) {
             yield i;
         }
     }
     const result = Array.from(generateNumbers(length));
     ```

3. **Using Array.prototype.map with Sequential Array Generation**:
   - Another approach would involve creating an array first, then using `map`:
     ```javascript
     const result = Array.from({ length: length }, (_, i) => i + 1);
     ```

All these alternatives provide different syntax and potential performance trade-offs, allowing developers to choose based on their specific requirements and familiarity with JavaScript.

Related benchmarks:

Array.from vs Array.fill (debugged 2) (version: 1)

Comparing performance of: from vs fill

Created: 10 months ago by: Guest

Jump to the latest result

from

fill

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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