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

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

new Array()

1.2M/s

push

561K/s

Array.from()

42K/s

Fastest: new Array() (29.8x faster)

View exact numbers

✓ new Array(): 1,247,286 ops/sec
• push: 560,997 ops/sec
• Array.from(): 41,791 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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 year ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

new Array()

2.6M/s

push

1.0M/s

Array.from()

72K/s

View exact numbers

Test name	Executions per second
✓ new Array()	2,608,327 Ops/sec
push	1,024,216 Ops/sec
Array.from()	71,890 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years ago by: Guest

Go to the latest result

new Array()

Array.from()

push

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 2 years ago by: Guest

Go to the latest result

new Array()

Array.from()

push

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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