Benchmark: Array.from() vs new Array().fil() vs [..Array()]

Script Preparation code:

var mapfn = (_, index) => {
    return index * 2 % 10;
}

Tests:

new Array().fill()
new Array(500).fill(500).map(mapfn)
Array.from()
Array.from({ length: 500 }, mapfn)
[...Array()]
[...Array(500)].map(mapfn)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Array().fill()
Array.from()
[...Array()]

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
new Array().fill()	264840.1 Ops/sec
Array.from()	68000.0 Ops/sec
[...Array()]	243047.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided JSON benchmark.

**Benchmark Definition**

The benchmark tests the performance difference between three ways to create filled arrays in JavaScript: `new Array().fill()`, `Array.from()` with an array constructor, and `[...Array()]` (the spread operator).

**Options being compared**

1. **`new Array().fill()`**: This method creates a new array with a specified number of elements, all set to the same value. In this case, it's used to create an array of 500 elements filled with the value `500`.
2. **`Array.from()` with an array constructor**: This method creates a new array from an iterable or an array-like object. Here, it's used to create an array from an array constructor that generates 500 elements.
3. **`[...Array()]` (spread operator)**: This is the spread operator, which converts an array into an array of its elements.

**Pros and Cons**

1. `new Array().fill()`:
	* Pros: Simple and straightforward to use, no need for additional libraries or constructors.
	* Cons: Can be slower than other methods due to the overhead of creating a new array.
2. `Array.from()` with an array constructor:
	* Pros: More efficient than `new Array().fill()` as it avoids the overhead of creating a new array.
	* Cons: Requires using an array constructor, which might be unfamiliar to some developers.
3. `[...Array()]` (spread operator):
	* Pros: Most lightweight option, no need for additional libraries or constructors.
	* Cons: Only works in modern JavaScript environments (ECMAScript 2015 and later) due to the use of the spread operator.

**Library/Function Used**

In this benchmark, the `mapfn` function is used as a callback function. It takes two arguments: `_` (the map iteration argument) and `index`. The function returns an index multiplied by 2, modulo 10 (`index * 2 % 10`). This function is used to calculate some intermediate value that's likely not relevant to the performance test.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in this benchmark. It's a straightforward comparison of three array creation methods.

**Other Alternatives**

If you wanted to test other array creation methods, here are a few options:

1. `Array.prototype.fill()`: This method creates a new array with a specified number of elements, all set to the same value.
2. `Array.from()` without an array constructor: You can also use `Array.from()` with an iterable or an object as its argument.
3. Other spread operators: Depending on your JavaScript version, you might be able to use other spread operators like `[...new Set()]` or `[...new Map()]`.

Keep in mind that the performance differences between these methods are usually minimal, and it's essential to consider the specific requirements of your application when choosing an array creation method.

Related benchmarks:

Array.from() vs new Array().fil() vs [..Array()] (version: 0)

Testing the difference between creating filled arrays.

Comparing performance of: new Array().fill() vs Array.from() vs [...Array()]

Created: 3 years ago by: Guest

Jump to the latest result

new Array().fill()

Array.from()

[...Array()]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):