Benchmark: Array constructor vs literal performance (10_000 items)

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Linux

View result in a separate tab

Array literal (explicit length) - 10 items

71K/s

Array constructor - 10_000 items

67K/s

Array literal - 10_000 items

37K/s

Array literal (assign by index) - 10_000 items

31K/s

View exact numbers

Test name	Executions per second
✓ Array literal (explicit length) - 10 items	71,400 Ops/sec
Array constructor - 10_000 items	67,336 Ops/sec
Array literal - 10_000 items	36,783 Ops/sec
Array literal (assign by index) - 10_000 items	31,192 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares the performance of four different ways to create an array in JavaScript:

1. **Array Constructor**: `new Array(n)`
2. **Array Literal (without explicit length)**: `[ ]`
3. **Array Literal (assign by index)**: `[i]` inside a loop
4. **Array Literal (explicit length)**: `arr.length = n;`

**Options Comparison**

The benchmark tests these four options because:

* The array constructor is a more traditional way of creating an array, but it may be slower due to the overhead of creating a new object.
* Array literals are often used when you know the size of the array at compile time. However, using `[]` without setting its length can lead to slower performance in older browsers or with large arrays.
* Assigning elements to the array by index (`arr[i] = i;`) is another common way to populate an array. This approach may be faster than using `new Array(n)` but might not be as efficient as literal creation for very large arrays.
* Using explicit length assignment (`arr.length = n;`) can be a good compromise between performance and memory usage.

**Pros and Cons**

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

1. **Array Constructor**: Pros - easy to use, no overhead at compile time. Cons - slower than literal creation.
2. **Array Literal (without explicit length)**: Pros - fast in modern browsers, no overhead at compile time. Cons - slow in older browsers or with large arrays.
3. **Array Literal (assign by index)**: Pros - faster than `new Array(n)`, suitable for very large arrays. Cons - may be slower than literal creation for small arrays.
4. **Array Literal (explicit length)**: Pros - balances performance and memory usage, suitable for most use cases. Cons - slightly slower than literal creation.

**Library Usage**

None of the benchmark options explicitly uses a JavaScript library. However, modern browsers like Chrome often include libraries or utilities that can influence the results, such as:

* V8 (Chrome's engine): may optimize array literals or use specialized instructions
* Web Workers: might affect performance by distributing tasks across multiple threads

**Special JS Features/Syntax**

The benchmark does not mention any special JavaScript features or syntax, but it's worth noting that older browsers or specific implementations might have different behavior for certain features like `let`/`const`, arrow functions, or `class` declarations.

**Alternatives**

If you're interested in exploring alternative approaches, consider the following:

* Using native array methods like `Array.prototype.fill()` or `Array.prototype.splice()`
* Creating an array with a typed array constructor (e.g., `Uint8Array`) for better performance
* Using a library or framework that provides optimized array creation and manipulation

Keep in mind that these alternatives might not be directly comparable to the original benchmark options, as they may introduce additional overhead or dependencies.

Array constructor vs literal performance (10_000 items) (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Array constructor - 10_000 items

Array literal - 10_000 items

Array literal (assign by index) - 10_000 items

Array literal (explicit length) - 10 items

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array constructor vs literal performance (10_000 items) (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Array constructor - 10_000 items

Array literal - 10_000 items

Array literal (assign by index) - 10_000 items

Array literal (explicit length) - 10 items

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: `Array constructor - 10_000 items vs Array literal - 10_000 items vs Array literal (assign by index) - 10_000 items vs Array literal (explicit length) - 10 items`