Benchmark: Array.from() vs new Array() vs push

Tests:

new Array()
new Array(500).fill(0, 0, 500)
Array.from()
Array.from({ length: 500 }, () => 0)
push
let array = []; for (let i = 0; i < 500; i++){ array.push(0) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Array()
Array.from()
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
new Array()	1476776.8 Ops/sec
Array.from()	43266.2 Ops/sec
push	651899.1 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested.

**Benchmark Overview**

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

1. `new Array()` (direct array creation)
2. `Array.from()` (using the `from` method)
3. `push()` (adding elements to an empty array using the `push()` method)

**Benchmark Definition**

The benchmark definition is a JSON object that describes the test case. It contains the following properties:

* `Name`: A brief description of the test case.
* `Description`: A longer description of what the test case is measuring.
* `Script Preparation Code` and `Html Preparation Code`: These fields are empty in this example, indicating that no additional setup code is required before running the benchmark.

**Individual Test Cases**

The benchmark consists of three individual test cases, each defined by a separate JSON object. Each test case contains:

* `Benchmark Definition`: A string that describes how to create a filled array using one of the three approaches.
* `Test Name`: A brief description of the approach being tested (e.g., "new Array()").

Here's a breakdown of each test case:

1. **`new Array(500).fill(0, 0, 500)`**: This creates an array with 500 elements, all initialized to 0.
2. **`Array.from({ length: 500 }, () => 0)`**: This uses the `from` method to create a filled array from an array-like object with 500 elements, each initialized to 0.
3. **`let array = []; for (let i = 0; i < 500; i++){ array.push(0) }`**: This creates an empty array and then uses the `push()` method to add 500 elements, all initialized to 0.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **`new Array()`**: Pros: Simple and straightforward. Cons: Can be slower due to the overhead of creating an array object.
* **`Array.from()`**: Pros: Fast and efficient, as it leverages the browser's optimized `from` method implementation. Cons: May require additional libraries or polyfills if not supported by all browsers.
* **`push()`**: Pros: Simple and widely supported, as it's a standard JavaScript method. Cons: Can be slower due to the overhead of adding elements to an array.

**Library**

The `Array.from()` approach uses the `from` method, which is a part of the ECMAScript Standard Library. The `from` method creates a new array from an iterable source object (e.g., an array-like object or a string).

**Special JS Feature/Syntax**

None are explicitly mentioned in this benchmark.

**Other Alternatives**

If you want to test alternative approaches for creating filled arrays, you might consider:

* Using the `Array.prototype.fill()` method: This is a more concise and expressive way of filling an array with a single value.
* Using a loop or recursion to create the array elements: These approaches can be slower than the direct array creation methods but may offer additional control or flexibility.

Keep in mind that the performance differences between these approaches will depend on the specific use case, browser, and JavaScript engine being used.

Related benchmarks:

Array.from() vs new Array() vs push (version: 0)

Testing the difference between creating filled arrays.

Comparing performance of: new Array() vs Array.from() vs push

Created: one year ago by: Guest

Jump to the latest result

new Array()

Array.from()

push

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