Benchmark: new Array(length).fill vs Array.from({ length })

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}
var arr = ['', '', ''];

const ARRAY_LENGTH = 10000;

Tests:

new Array + fill
new Array(ARRAY_LENGTH).fill(0)
Array.from
Array.from({ length: ARRAY_LENGTH })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Array + fill
Array.from

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/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

new Array + fill

173K/s

Array.from

6K/s

View exact numbers

Test name	Executions per second
✓ new Array + fill	173,014 Ops/sec
Array.from	5,661 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark compares two JavaScript methods for creating an array of a specified length: using `new Array(length).fill(0)` and using `Array.from({ length })`. Both approaches are commonly employed in JavaScript for initializing arrays, but they have distinct performance characteristics and variations in usage.

### Comparison of Options

1. **new Array(length).fill(0)**:
   - **Description**: This method creates a new array of a specified length and fills it with a specified value (in this case, `0`).
   - **Pros**:
     - Straightforward and easy to understand.
     - The created array is immediately populated with a value, which can be useful if you need to work with a default value.
   - **Cons**:
     - The `fill` method operates on an existing array instance, which can lead to performance overhead when the array is large.
     - If you only want to initialize the array without worrying about the contents, this method might be less optimal.

2. **Array.from({ length: ARRAY_LENGTH })**:
   - **Description**: This method creates a new array from an array-like structure or an iterable. In this case, an object with a `length` property is passed in, leading to the creation of an array whose size is defined by that length.
   - **Pros**:
     - Efficient for creating an array when only the size is important, as it does not fill the array with values, which can reduce the overhead.
     - Allows for additional mapping functions to be used if desired, making it versatile.
   - **Cons**:
     - If you need all elements initialized to a specific value, you would need to provide a mapping function, which may complicate the implementation.

### Benchmarking Results

From the benchmark results, we can observe the performance of each method:

- **new Array + fill**: Achieved **155,690.15625 executions per second**.
- **Array.from**: Achieved **4,883.36767578125 executions per second**.

This indicates that `new Array(length).fill(0)` significantly outperforms `Array.from({ length })` in this specific setup. The results suggest that while `Array.from` can offer flexibility, it may introduce more overhead compared to directly creating and filling an array with `new Array`.

### Considerations and Alternatives

When deciding which method to use, consider the following:

- If performance, especially for large arrays, is crucial, you might prefer `new Array(length).fill(0)`.
- If you need more control over how the array is generated (e.g., with varying values or other conditions), `Array.from({ length })` is more suited.

### Alternatives to Consider

Other alternatives for creating arrays in JavaScript include:

- **Using the Spread Syntax**: For example, `([...Array(ARRAY_LENGTH)].map(() => 0))` to create a filled array, although this is less efficient than the two methods tested.
- **Array Constructor with Initializer**: This can be done using methods like `Array.apply(null, Array(ARRAY_LENGTH)).map(() => 0)`, though performance characteristics may vary.
- **Typed Arrays**: If your use case involves numeric data, consider using Typed Arrays (like `Uint8Array`) as they provide better performance and memory efficiency for large arrays.

In summary, the choice between `new Array(length).fill(0)` and `Array.from({ length })` will depend on the specific requirements of your project, such as performance needs, initialization values, and the overall context of array usage.

new Array(length).fill vs Array.from({ length }) (version: 1)

Comparing performance of: `new Array + fill vs Array.from`

Created: one year ago by: Guest

Go to the latest result

new Array + fill

Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

new Array(length).fill vs Array.from({ length }) (version: 1)

Comparing performance of: new Array + fill vs Array.from

Created: one year ago by: Guest

Go to the latest result

new Array + fill

Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `new Array + fill vs Array.from`