Benchmark: Array constructor vs literal performance - 100000 items

Tests:

Array constructor - 100000 items
var n = 100000; var arr = new Array(n); for (var i = 0; i < n; i++) { arr[i] = i; }
Array literal - 100000 items
var n = 100000; var arr = []; for (var i = 0; i < n; i++) { arr.push(i); }
Array literal (assign by index) - 100000 items
var n = 100000; var arr = []; for (var i = 0; i < n; i++) { arr[i] = i; }
Array literal (explicit length) - 100000 items
var n = 100000; 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 - 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: 5 years ago)

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

Browser/OS: Chrome 73 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Array constructor - 100000 items	1394.6 Ops/sec
Array literal - 100000 items	583.6 Ops/sec
Array literal (assign by index) - 100000 items	428.9 Ops/sec
Array literal (explicit length) - 100000 items	1457.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to creating arrays in JavaScript is crucial, as it can impact the efficiency and scalability of many applications.

The provided benchmark test measures the time taken by four different methods to create an array of 100,000 elements:

1. **Array constructor**: This approach creates a new array object using the `new Array()` syntax.
```javascript
var arr = new Array(n);
```
Pros: Simple and straightforward syntax.
Cons: Can be slower due to the overhead of creating a new object.

2. **Array literal (assign by index)**: This approach uses an empty array `[]` and assigns values to each element using the indexing syntax (`arr[i] = i;`).
```javascript
var arr = [];
for (var i = 0; i < n; i++) {
  arr.push(i);
}
```
Pros: Can be faster since it avoids the overhead of creating a new object.
Cons: Requires an extra `push()` call to add elements, which can lead to additional memory allocations.

3. **Array literal (explicit length)**: This approach sets the length property of an empty array using `arr.length = n;` and then assigns values to each element using indexing syntax (`arr[i] = i;`).
```javascript
var arr = [];
arr.length = n;
for (var i = 0; i < n; i++) {
  arr[i] = i;
}
```
Pros: Similar to assign by index, but avoids the extra `push()` call.
Cons: Requires an extra property access (`arr.length`).

4. **Array constructor (alternative)**: This approach is similar to the original array constructor method, but uses a different syntax (`var arr = new Array(n); var len = n;`) to avoid issues with object length.
```javascript
var arr = new Array(n);
var len = n;
for (var i = 0; i < len; i++) {
  arr[i] = i;
}
```
Pros: Similar to the original array constructor method, but avoids potential issues with object length.
Cons: Additional variable `len` is required.

The provided benchmark results show that:

* Array literal (explicit length) is the fastest approach.
* Array literal (assign by index) is faster than the array constructor.
* The other two approaches are slower due to their overhead.

Other alternatives for creating arrays in JavaScript include using the spread operator (`[...new Array(n)]`) or `Array.from()` methods. However, these approaches may not be supported in older browsers and may have performance implications of their own.

Here is an example of how you can create an array using the spread operator:
```javascript
var arr = [...new Array(n)];
```
And here's an example using `Array.from()`:
```javascript
var arr = Array.from(new Array(n));
```
Keep in mind that these approaches may not be as efficient as the methods tested in this benchmark, and their performance may vary depending on the specific use case.

In summary, when it comes to creating arrays in JavaScript, the order of operations matters. The most important thing is to choose a method that balances readability with performance.

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: 8 years ago by: Registered User

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>

Experimental features:

Fastest: N/A

Slowest: N/A

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