Benchmark: Array.from() vs new Array() + destruct

Tests:

new Array()
new Array(500).fill(0, 0, 500)
Array.from()
Array.from({ length: 500 }, () => 0)
new Array() + destruct
[...Array(500)].map(() => 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Array()
Array.from()
new Array() + destruct

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
new Array()	907668.8 Ops/sec
Array.from()	33344.6 Ops/sec
new Array() + destruct	419879.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

The goal of this benchmark is to compare the performance of three different approaches for creating filled arrays:

1. `new Array()`: This approach creates an empty array and then uses the `fill()` method to fill it with a specified number of elements.
2. `Array.from()`: This approach uses the `from` function to create a new array from an iterable, such as an array literal or an object with a `length` property.
3. `new Array() + destruct`: This approach creates a filled array using the `new Array()` constructor and then uses destructuring syntax to extract individual elements.

Now, let's discuss the pros and cons of each approach:

**1. `new Array()`**

Pros:

* Simple and straightforward implementation
* Well-supported by most browsers

Cons:

* Requires two separate operations (creating an empty array and filling it)
* May incur overhead due to the use of the `fill()` method, which can create a new array in some browsers

**2. `Array.from()`**

Pros:

* More concise and expressive syntax
* Can be used with other iterable objects besides arrays
* Often implemented more efficiently than the `new Array()` approach

Cons:

* May not be supported by older browsers or those with limited JavaScript engines
* Requires a specific set of libraries (e.g., ES6+ compatibility layers)

**3. `new Array() + destruct`**

Pros:

* Takes advantage of modern array features, such as destructuring and spread operators
* Can be more readable and concise for certain use cases

Cons:

* May not be supported by older browsers or those with limited JavaScript engines
* Requires a good understanding of array methods and destructuring syntax

Now, let's talk about the libraries used in this benchmark. The `Array.from()` function is part of the modern JavaScript standard library (ECMAScript 2015+). If you're using an older browser or environment that doesn't support ES6+, you may need to use a polyfill or compatibility layer to access this method.

The "new Array() + destruct" approach uses modern array features like destructuring and spread operators, which are also part of the modern JavaScript standard library. However, some browsers may not implement these features correctly or at all.

Other alternatives for creating filled arrays include:

* Using a `Buffer` object with the `fill()` method (available in Node.js and some browser engines)
* Creating an array using a loop (not shown in this benchmark)
* Using a specialized library like Lodash's `repeat()` function (not shown in this benchmark)

Keep in mind that the performance differences between these approaches can be significant, depending on the specific use case and browser environment.

Related benchmarks:

Array.from() vs new Array() + destruct (version: 0)

Testing the difference between creating filled arrays.

Comparing performance of: new Array() vs Array.from() vs new Array() + destruct

Created: 2 years ago by: Guest

Jump to the latest result

new Array()

Array.from()

new Array() + destruct

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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