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: 11 months ago by: Guest

Jump 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: 11 months 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

Test name	Executions per second
Array constructor - 10_000 items	46417.6 Ops/sec
Array literal - 10_000 items	24748.4 Ops/sec
Array literal (assign by index) - 10_000 items	23657.3 Ops/sec
Array literal (explicit length) - 10 items	47469.1 Ops/sec
Frozen Array constructor - 10_000 items	230.1 Ops/sec
Array constructor, no new - 10_000 items	45154.3 Ops/sec
Array constructor fill - 10_000 items	27692.2 Ops/sec

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

Related benchmarks:

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

Created: 11 months ago by: Guest

Jump 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

Frozen Array constructor - 10_000 items

Array constructor, no new - 10_000 items

Array constructor fill - 10_000 items

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