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

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(0).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	163.1 Ops/sec
fill	127.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you're examining compares two different approaches for creating and populating an array in JavaScript: using `Array.from` versus `Array.fill` in conjunction with `Array.map`.

### Comparison of Options

1. **Approach using `Array.from`**:
   - **Code**: 
     ```javascript
     result.push(Array.from({length:length}).map((_, i) => i + 1));
     ```
   - **Explanation**: This method utilizes the `Array.from` function, which creates a new array instance from an array-like or iterable object. In this case, an object with a specific `length` property is passed to `Array.from`, resulting in an array of that length. The `map` function is then applied to generate sequential numbers starting from 1.
   - **Pros**: 
     - Clean and declarative way to create an array with initialized values.
     - The use of `map` allows for flexibility in populating the array with any transformation logic.
   - **Cons**: 
     - Slightly more overhead due to the transformation through `map`.
     - Might involve more operations, leading to longer execution time in some scenarios.

2. **Approach using `Array.fill`**:
   - **Code**: 
     ```javascript
     result.push(Array(length).fill(0).map(i => i + 1));
     ```
   - **Explanation**: This method first creates an array of a specified length filled with the value `0` using `Array.fill`. Then it applies `map` to transform each element (in this case, the `0`s) into sequential numbers starting from 1.
   - **Pros**:
     - More straightforward in terms of initializing an array with default values.
     - `Array.fill` allows for easy specification of a default value at initialization.
   - **Cons**: 
     - Similar overhead from the additional `map` operation.
     - Slightly less declarative because it implies an initial filling step before mapping, which can be seen as unnecessary when the resulting values are not dependent on the initial value.

### Performance Results
From the benchmark results:
- The `Array.from` approach achieved approximately **163.14 executions per second**.
- The `Array.fill` approach achieved approximately **127.22 executions per second**.

In this case, `Array.from` is faster than `Array.fill` for generating the required arrays in the specific context of this benchmark. This can be attributed to the overhead of filling an array and subsequently mapping values, as observed in the measures.

### Other Considerations
- The choice between these two methods might also depend on the specific requirements of the application, such as readability, maintainability, and developer familiarity with each method.
- For modern JavaScript (ES6 and beyond), both methods are widely supported, but not all environments may support them (especially older ones), so compatibility could be a consideration.
- Alternatives to these methods could include using a loop for populating the array manually, which can be more performant in some cases but at the cost of verbosity:
  ```javascript
  const result = [];
  for (let i = 0; i < length; i++) {
      result[i] = i + 1;
  }
  ```

Ultimately, the choice between `Array.from` and `Array.fill` for array creation depends on the context of use, performance needs, and coding style preferences. Each method showcases unique strengths that can benefit different types of applications.

Related benchmarks:

Array.from vs Array.fill (debugged) (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):