Benchmark: Various Array constructors vs literal performance (10_000 items)

Various Array constructors 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 vs Frozen Array constructor - 10_000 items vs Array constructor, no new - 10_000 items vs Array constructor fill - 10_000 items`

Created: 2 years ago by: Guest

Go to the latest result

Tests:

Array constructor - 10_000 items
const n = 10_000; const arr = new Array(n); for (let i = 0; i < n; i++) { arr[i] = i; }
Array literal - 10_000 items
const n = 10_000; const arr = []; for (let i = 0; i < n; i++) { arr.push(i); }
Array literal (assign by index) - 10_000 items
const n = 10_000; const arr = []; for (let i = 0; i < n; i++) { arr[i] = i; }
Array literal (explicit length) - 10 items
const n = 10_000; const arr = []; arr.length = n; for (let i = 0; i < n; i++) { arr[i] = i; }
Frozen Array constructor - 10_000 items
const n = 10_000 const arr = new Array(n) Object.freeze(arr) for (let i = 0; i < n; i++) { arr[i] = i }
Array constructor, no new - 10_000 items
const n = 10_000; const arr = Array(n); for (let i = 0; i < n; i++) { arr[i] = i; }
Array constructor fill - 10_000 items
const n = 10_000; const arr = Array(n).fill(undefined); for (let 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
Frozen Array constructor - 10_000 items
Array constructor, no new - 10_000 items
Array constructor fill - 10_000 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

47K/s

Array constructor - 10_000 items

46K/s

Array constructor, no new - 10_000 items

45K/s

Array constructor fill - 10_000 items

28K/s

Array literal - 10_000 items

25K/s

Array literal (assign by index) - 10_000 items

24K/s

Frozen Array constructor - 10_000 items

230/s

View exact numbers

Test name	Executions per second
✓ Array literal (explicit length) - 10 items	47,469 Ops/sec
Array constructor - 10_000 items	46,418 Ops/sec
Array constructor, no new - 10_000 items	45,154 Ops/sec
Array constructor fill - 10_000 items	27,692 Ops/sec
Array literal - 10_000 items	24,748 Ops/sec
Array literal (assign by index) - 10_000 items	23,657 Ops/sec
Frozen Array constructor - 10_000 items	230 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is a crucial task, and MeasureThat.net provides a valuable resource for benchmarking various array constructors.

**What is being tested?**

The provided JSON represents six different test cases that compare the performance of various array constructors:

1.  `Array constructor` (new Array(n))
2.  `Array literal` (const arr = [])
3.  `Array literal with explicit length` (const arr = [], arr.length = n)
4.  `Frozen Array constructor` (Object.freeze(arr) and then using arr as an array)
5.  `Array constructor, no new` (new Array(n).fill(undefined))
6.  `Array literal (assign by index)` (const arr = []; push(i) instead of direct indexing)

**Options being compared:**

*   Direct creation using the `Array` constructor (`new Array(n)` vs. `Object.freeze(arr)` for frozen array)
*   Literal syntax creation (`const arr = []` vs. `arr.length = n`)
*   Using the `push` method to add elements (instead of direct indexing)

**Pros and Cons of each approach:**

1.  **Array constructor**: This is a simple and straightforward way to create an array. However, it can lead to slower performance due to the overhead of creating a new array object.
2.  **Array literal**: Creating an array using the `[]` syntax is often faster than using the `new Array()` method. However, this approach assumes that the initial length of the array is known, which may not always be the case.
3.  **Array literal with explicit length**: This approach provides better performance by avoiding the overhead of creating a new array object and allows for more control over the initial size of the array.
4.  **Frozen Array constructor**: Freezing an array creates a read-only copy of the original array, which can lead to slower performance due to the added complexity.
5.  **Array constructor, no new**: Using `new Array(n).fill(undefined)` is a clever trick that avoids creating a new array object by reusing an existing one filled with undefined values.

**Additional considerations:**

*   The use of `Object.freeze()` to create a frozen array can lead to slower performance due to the added complexity.
*   Direct indexing (`arr[i]`) vs. using `push` method (`arr.push(i)`) may have different performance implications depending on the specific JavaScript engine and version.

**Alternatives:**

If you want to explore alternative approaches or optimize your code for better performance, consider the following:

1.  Use a library like Lodash that provides optimized array methods.
2.  Implement your own optimized array creation and manipulation functions using techniques like caching and memoization.
3.  Profile your code to identify bottlenecks and optimize specific sections.

By understanding the trade-offs and nuances of each approach, you can make informed decisions about which method to use in your JavaScript projects and optimize their performance accordingly.