Benchmark: Array constructor vs literal performance - 100000 items

Script Preparation code:

var n = 10000;

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Tests:

Array constructor - 100000 items
var arr = new Array(n); for (var i = 0; i < n; i++) { arr[i] = new Person(i + '', i); }
Array literal - 100000 items
var arr = []; for (var i = 0; i < n; i++) { arr.push(new Person(i + '', i)); }
Array literal (assign by index) - 100000 items
var arr = []; for (var i = 0; i < n; i++) { arr[i] = new Person(i + '', i); }
Array literal (explicit length) - 100000 items
var arr = []; arr.length = n; for (var i = 0; i < n; i++) { arr[i] = new Person(i + '', i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array constructor - 100000 items
Array literal - 100000 items
Array literal (assign by index) - 100000 items
Array literal (explicit length) - 100000 items

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Linux

View result in a separate tab

Test name	Executions per second
Array constructor - 100000 items	2994.9 Ops/sec
Array literal - 100000 items	2796.7 Ops/sec
Array literal (assign by index) - 100000 items	2794.0 Ops/sec
Array literal (explicit length) - 100000 items	2857.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark compares the performance of different ways to create an array in JavaScript.

**What's being tested?**

The test creates an array with 100,000 elements using four different methods:

1. **Array constructor**: `var arr = new Array(n);` followed by a loop that populates each element.
2. **Array literal (assign by index)**: `var arr = [];` followed by a loop that assigns elements to the array using indexing (`arr[i] = new Person(i + '', i);`).
3. **Array literal (explicit length)**: `var arr = [];` followed by setting the length of the array to `n` and then populating each element.
4. **Array constructor**: Similar to method 1, but without assigning elements to the array using indexing.

**Options compared**

The test compares the performance of these four methods:

* **Array constructor**: Creates an empty array and then populates it with new objects.
* **Array literal (assign by index)**: Creates an empty array and then assigns new objects to each element in the array.
* **Array literal (explicit length)**: Creates an empty array, sets its length, and then populates it with new objects.
* **Array constructor**: Similar to method 1, but without assigning elements to the array using indexing.

**Pros and Cons**

Here's a brief summary of each approach:

* **Array constructor**: Can be slower due to the overhead of creating an array object. However, can be faster for large arrays since it avoids the need for multiple assignments.
* **Array literal (assign by index)**: Typically the fastest way to create an array in JavaScript, as it allows for efficient assignment of elements using indexing.
* **Array literal (explicit length)**: Can be slower than method 2 due to the overhead of setting the length property. However, can still be faster than method 1 since it avoids creating multiple assignments.
* **Array constructor**: Similar performance to method 4, as both methods create an array object without assigning elements using indexing.

**Library and Special JS Features**

The `Person` function is not a built-in JavaScript library, but rather a custom class defined in the script preparation code. It's likely used only for this benchmark to measure the performance of array creation.

**Other Considerations**

* **Browser differences**: The test results may vary depending on the browser being used.
* **Performance optimization**: This benchmark is intended to highlight the performance differences between different array creation methods, rather than provide a specific optimization technique.
* **Alternative approaches**: Other ways to create arrays in JavaScript, such as using `Array.from()` or `Array.create()`, are not tested in this benchmark.

**Alternatives**

Other alternatives for creating arrays in JavaScript include:

* Using `Array.from()` with an array of objects
* Using `Array.create()` with an object
* Using a library like Lodash's `repeat()` function

Related benchmarks:

Array constructor vs literal performance - 100000 items (version: 0)

Comparing performance of: Array constructor - 100000 items vs Array literal - 100000 items vs Array literal (assign by index) - 100000 items vs Array literal (explicit length) - 100000 items

Created: 9 years ago by: Guest

Jump to the latest result

Array constructor - 100000 items

Array literal - 100000 items

Array literal (assign by index) - 100000 items

Array literal (explicit length) - 100000 items

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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