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

Tests:

[...new Array(N)]
[...new Array(500)].fill('').map((_, i) => i);
Array.from({ length: N })
Array.from({ length: 500 }).map((_, i) => i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
[...new Array(N)]
Array.from({ length: N })

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
[...new Array(N)]	462999.5 Ops/sec
Array.from({ length: N })	56994.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and the pros/cons of different approaches.

**Benchmark Overview**

The benchmark compares two methods for creating an array in JavaScript:

1. Using the spread operator (`[...new Array()]`)
2. Using `Array.from()` with a length property

These two methods are used to create an array of length `N`, filled with empty strings, and then map over it to produce an array of integers.

**What's being tested**

The benchmark measures the execution time for each method on various devices (desktop) using different browsers (Chrome 103). The test results show the number of executions per second for each test case.

**Comparing options**

There are two main methods being compared:

1. **[...new Array(N)]**: This method uses the spread operator to create an array from a new `Array` object. It's a simple and concise way to create an array.
2. **Array.from({ length: N })**: This method uses the `Array.from()` function to create an array from an object with a specified length.

**Pros/Cons of each approach**

1. **[...new Array(N)]**:
	* Pros:
		+ Simple and concise
		+ Fast execution time (due to using a native array method)
	* Cons:
		+ May not be as flexible or efficient for large arrays
2. **Array.from({ length: N })**:
	* Pros:
		+ More flexible than `[...new Array(N)]`, as it can create an array from any type of object
		+ Can be more efficient for large arrays (due to using a native function)
	* Cons:
		+ May have slower execution time due to the overhead of creating an object and calling `Array.from()`

**Library usage**

None of the test cases use any external libraries. The only library used is JavaScript itself, which provides the built-in methods `Array.from()`.

**Special JS feature or syntax**

The test cases do not use any special JavaScript features or syntax beyond the standard array methods mentioned above.

Related benchmarks:

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

Quick comparison between two methods of creating and filling an N-length array.

Comparing performance of: [...new Array(N)] vs Array.from({ length: N })

Created: 2 years ago by: Guest

Jump to the latest result

[...new Array(N)]

Array.from({ length: N })

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):