Benchmark: Array+fill vs Array.from()

Script Preparation code:

function map(){
 return 1
}
let obj = {length:1000},
    {from}=Array

Tests:

Array()
for(let i = 300; i--;)console.log(Array(1000).fill(1))
Array.from
for(let i = 300; i--;)console.log(from(obj,map))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array()
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 days ago)

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
Array()	13.0 Ops/sec
Array.from	9.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):

LLMs can make mistakes. Check important info.

In this benchmark test, two different methods for creating and populating arrays in JavaScript are compared: using the `Array` constructor combined with the `fill` method, and the `Array.from()` method.

### Overview of the Tested Options

1. **Array() with fill()**:
   - Benchmark Definition: `for(let i = 300; i--;)console.log(Array(1000).fill(1))`
   - **Description**: This approach creates a new array with a length of 1000 using the `Array` constructor and then fills the array with the value `1` using the `fill()` method.
   - **Performance**: In the benchmark results, this approach showed an execution rate of approximately 12.95 executions per second.

2. **Array.from()**:
   - Benchmark Definition: `for(let i = 300; i--;)console.log(from(obj,map))`
   - **Description**: This approach uses the `Array.from()` method, which creates a new array from an array-like or iterable object. In this case, `from` is destructured from the `Array` object, and it uses `obj` (which defines a length of 1000) and a mapping function, `map()`, that returns `1`.
   - **Performance**: This method exhibited a lower execution rate of approximately 9.93 executions per second in the benchmark results.

### Pros and Cons

#### Array() with fill()
- **Pros**:
  - Simple and straightforward syntax for initializing an array.
  - May be faster for large arrays when merely filling with a static value.
  
- **Cons**:
  - The `fill()` method can potentially involve more overhead when not just filling with static values, as it does additional operations on each element.
  - Less flexibility compared to `Array.from()` for constructing more complex arrays.

#### Array.from()
- **Pros**:
  - Greater flexibility, allowing creation of arrays from different types of iterable objects or array-like structures.
  - Supports a mapping function as the second argument, enabling more complex initialization logic beyond simply assigning a static value.

- **Cons**:
  - In this specific benchmark, it performed slower than the `Array.fill()` approach, which suggests it could be less efficient for large arrays filled with static values.

### Considerations

- **Performance Context**: The performance differences observed in this benchmark can vary based on use cases. For initializing an array with a static value, `Array.fill()` may be preferable due to its better performance.
- **Usability**: While the `Array.from()` method has various benefits when creating arrays from other sources, it may not be as performant when the goal is simply to create a large uniform array of a single value.

### Other Alternatives

Beyond these two methods, developers have various alternatives for array creation:

1. **Spread Operator**: Using `[...Array(1000).fill(1)]` allows for creating arrays with static values while providing a more readable syntax.
   
2. **Array constructor with a loop**: `let arr = []; for(let i=0; i<1000; i++) arr[i] = 1;` This is a more manual approach and is less concise but gives complete control over initialization.

3. **Map on a new array**: `Array.from({length: 1000}, () => 1)` offers another way similar to `Array.from()` but directly utilizes its capability to create an array and fill it based on the mapping function.

Each of these alternatives has its pros and cons, often revolving around trade-offs between readability, performance, and flexibility for the specific use case at hand. In practice, the choice of method will depend on the specific requirements of your project and the performance characteristics needed in your application.

Related benchmarks:

Array+fill vs Array.from() (version: 1)

Comparing performance of: Array() vs Array.from

Created: 4 days ago by: Guest

Jump to the latest result

Array()

Array.from

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):