Benchmark: Array.from vs Array.fill vs [...Array].map

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)) }
spread
let n = 10000, length = 50 const result = [] for (let i = 0; i < n; ++i) { result.push([...Array(length)].map((_,i) => i + 1)) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
from
fill
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
from	76.2 Ops/sec
fill	744.9 Ops/sec
spread	769.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON focuses on comparing three different methods of creating an array in JavaScript, specifically for populating an array with a series of sequential numbers. The methods being compared are:

1. **Array.from()**
2. **Array.fill()**
3. **Spread Operator with Array()**

### Description of Each Approach

**1. Array.from()**
```javascript
result.push(Array.from({length:length}).map((_, i) => i + 1));
```
- **Explanation**: This method constructs a new array from an array-like structure. Here, an object with a property `length` is passed to `Array.from()`, which creates an array of the specified length. The `map()` function is then used to fill this array with numbers starting from 1 up to `length`.

- **Pros**: 
  - Very clear and readable.
  - Allows for direct mapping during creation, which can be more functional in style.

- **Cons**: 
  - Tends to be slower in performance compared to other methods as it internally creates an object and processes mapping afterward.

---

**2. Array.fill()**
```javascript
result.push(Array(length).fill(0).map((_, i) => i + 1));
```
- **Explanation**: This method first creates an array of a given length filled with zeros (or any specified value), and then it uses the `map()` function to replace each value with its index incremented by 1.

- **Pros**: 
  - Straightforward and intuitive for many developers as it follows a two-step process: first create and fill, then modify the array.
  
- **Cons**: 
  - Slightly more memory usage initially since an array is filled with zeroes before being mapped to the desired output.

---

**3. Spread Operator with Array()**
```javascript
result.push([...Array(length)].map((_, i) => i + 1));
```
- **Explanation**: This method leverages the spread operator (`...`) along with an `Array(length)` call to create an empty array of the specified length. The spread operator expands this into a new array, allowing `map()` to be used to fill with the sequence.

- **Pros**: 
  - Highly readable and concise. 
  - Uses fewer steps compared to the other methods, leading to potentially better performance.

- **Cons**: 
  - The syntactic sugar might not be as familiar to developers new to ES6 features.

### Benchmark Results

The benchmark results indicate the performance of each approach on a specific machine:
- **Spread Operator**: 769.47 executions per second
- **Array.fill()**: 744.94 executions per second
- **Array.from()**: 76.23 executions per second

From these numbers, it's clear that the spread operator is the fastest approach for this scenario, followed closely by `Array.fill()`, while `Array.from()` significantly lags behind.

### Considerations and Alternatives

- **Considerations**: When choosing a method, keep in mind not just the speed, but also readability, maintainability, and familiarity among team members. The spread operator and `Array.from()` have a more modern syntax, appealing to those using ES6 standards. However, older environments may lack support for these features.

- **Other Alternatives**: Alternatives could involve using a simple loop to construct an array manually or employing helper libraries like Lodash (which has utilities like `_.range()`) to generate the array. These might be beneficial for specific use cases, especially in older JavaScript environments or when working in a context where performance is critical and compatibility matters.

In summary, the benchmark offers insights into the performance characteristics of modern JavaScript array creation techniques, and it is evident that the choice of syntax can have meaningful implications on both performance and code clarity.

Related benchmarks:

Array.from vs Array.fill vs [...Array].map (version: 1)

Comparing performance of: from vs fill vs spread

Created: 2 months ago by: Guest

Jump to the latest result

from

fill

spread

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):