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

Script Preparation code:

const length = 50;

Tests:

Array(length).fill()
Array(length).fill();
Array.from({ length: length })
Array.from({ length: length });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array(length).fill()
Array.from({ length: length })

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results.

**Benchmark Overview**

The provided benchmark compares two ways to create an array of a specified length in JavaScript:

1. Using the `Array(length)` constructor
2. Using the `Array.from()` method with an object having a `length` property

**Options Compared**

The two options being compared are:

* `Array(length)`: This is a native JavaScript constructor that creates an array from a specified length.
* `Array.from({ length: length })`: This method uses the `from()` function to create an array from an iterable (in this case, an object with a `length` property).

**Pros and Cons**

* `Array(length)`: Pros:
	+ Fast and efficient
	+ Low overhead
	+ Native JavaScript implementation
Cons:
	+ May not work correctly in older browsers that don't support arrays of arbitrary length
	+ May have performance issues if the array is very large
* `Array.from({ length: length })`: Pros:
	+ More flexible than `Array(length)` (works with objects having any property, not just `length`)
	+ Can be used to create arrays from other iterables (e.g., arrays, strings)
Cons:
	+ May have higher overhead compared to `Array(length)`
	+ Requires modern JavaScript implementations that support the `from()` function

**Library and Purpose**

* No specific library is mentioned in this benchmark.
* However, it's worth noting that `Array.from()` was introduced in ECMAScript 2015 (ES6) as a way to create arrays from iterables.

**Special JS Feature or Syntax**

* There are no special JavaScript features or syntaxes being tested in this benchmark. Both options use native JavaScript constructs.

**Other Considerations**

When choosing between these two options, consider the specific requirements of your use case:

* If you need to create an array of a fixed length and don't care about compatibility with older browsers, `Array(length)` is likely the better choice.
* If you need more flexibility in creating arrays from other iterables or objects having any property, `Array.from({ length: length })` might be a better fit.

**Alternatives**

Other alternatives to create arrays include:

* Using the spread operator (`[...new Array(length)]`)
* Creating an array with a loop (e.g., `[]; for (var i = 0; i < length; i++) { arr.push(i); }`)

These approaches may have different performance characteristics and use cases compared to the options being tested in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array(length).fill()	5251948.0 Ops/sec
Array.from({ length: length })	3973576.8 Ops/sec

Related benchmarks:

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

Comparing performance of: Array(length).fill() vs Array.from({ length: length })

Created: 8 months ago by: Registered User

Jump to the latest result

Array(length).fill()

Array.from({ length: length })

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):