Benchmark: compare the ways to generate an empty array for iteration 2

compare the ways to generate an empty array for iteration 2 (version: 0)

- Array.apply: Array.apply(null, Array(100)) - Destructuring operator: [...Array(100)] - Array.prototype.fill Array(100).fill(undefined) - Array.from Array.from({ length: 100 })

Comparing performance of: `Array.apply(null, Array(n)) vs [...Array(n)] vs Array(n).fill(null) vs Array.from({ length: n }) vs Array.from({ length:n }, (item, i) => i) vs Array(n).fill(0)`

Created: 2 years ago by: Guest

Go to the latest result

Tests:

Array.apply(null, Array(n))
Array.apply(null, Array(1000)).map((item, i) => i);
[...Array(n)]
[...Array(1000)].map((item, i) => i);
Array(n).fill(null)
Array(1000).fill(null).map((item, i) => i);
Array.from({ length: n })
Array.from({ length: 1000 }).map((item, i) => i);
Array.from({ length:n }, (item, i) => i)
Array.from({ length:1000 }, (item, i) => i);
Array(n).fill(0)
Array(1000).fill(0).map((item, i) => i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.apply(null, Array(n))
[...Array(n)]
Array(n).fill(null)
Array.from({ length: n })
Array.from({ length:n }, (item, i) => i)
Array(n).fill(0)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 124 on Mac OS X 10.15.7

View result in a separate tab

Array(n).fill(0)

378K/s

Array(n).fill(null)

344K/s

[...Array(n)]

338K/s

Array.apply(null, Array(n))

228K/s

Array.from({ length: n })

41K/s

Array.from({ length:n }, (item, i) => i)

37K/s

View exact numbers

Test name	Executions per second
✓ Array(n).fill(0)	378,235 Ops/sec
Array(n).fill(null)	343,846 Ops/sec
[...Array(n)]	338,495 Ops/sec
Array.apply(null, Array(n))	227,848 Ops/sec
Array.from({ length: n })	40,963 Ops/sec
Array.from({ length:n }, (item, i) => i)	36,564 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.

The provided JSON represents a JavaScript microbenchmark test on MeasureThat.net. The test aims to compare different ways of generating an empty array for iteration, which is a fundamental operation in JavaScript programming.

**Test Cases:**

The test consists of six individual test cases, each representing a different approach to generate an empty array:

1. `Array.apply(null, Array(1000)).map((item, i) => i);`: This method uses the `Array.apply()` function with no arguments and an empty array as its first argument.
2. `[...Array(1000)].map((item, i) => i);`: This method uses the spread operator (`[...]`) to create a new array from an existing one.
3. `Array(1000).fill(null).map((item, i) => i);`: This method creates an empty array and fills it with `null` values.
4. `Array.from({ length: 1000 }).map((item, i) => i);`: This method uses the `Array.from()` function to create a new array from an object with a specified length.
5. `Array.from({ length:1000 }, (item, i) => i);`: Similar to the previous one, but uses a callback function to transform each element in the array.
6. `Array(1000).fill(0).map((item, i) => i);`: This method creates an empty array and fills it with zeros.

**Library Usage:**

* The spread operator (`[...]`) is used in test cases 2 and 5.
* The `Array.from()` function is used in test cases 4 and 6.
* No other libraries are explicitly mentioned as being used in the benchmark.

**Special JS Features/Syntax:**

* None of the test cases use any special JavaScript features or syntax beyond the standard language.

**Pros and Cons of Each Approach:**

1. `Array.apply(null, Array(1000)).map((item, i) => i);`:
	* Pros: This method is concise and creates an empty array.
	* Cons: It relies on `Array.apply()`, which can be slow in some browsers.
2. `[...Array(1000)].map((item, i) => i);`:
	* Pros: The spread operator is widely supported and efficient.
	* Cons: This method assumes that the spread operator was introduced at a time when it was already implemented.
3. `Array(1000).fill(null).map((item, i) => i);`:
	* Pros: Fills an empty array with a fixed value (`null`).
	* Cons: Creates unnecessary objects and uses more memory than necessary.
4. `Array.from({ length: 1000 }).map((item, i) => i);`:
	* Pros: Efficiently creates an empty array using the `Array.from()` function.
	* Cons: Requires modern browsers that support this function.
5. `Array.from({ length:1000 }, (item, i) => i);`:
	* Pros: Similar to the previous one but uses a callback function for transformation.
	* Cons: May incur additional overhead due to the callback function.
6. `Array(1000).fill(0).map((item, i) => i);`:
	* Pros: Fills an empty array with zeros.
	* Cons: Creates unnecessary objects and uses more memory than necessary.

**Other Alternatives:**

For comparison, other approaches to generate an empty array could include:

* Using `Array.prototype.concat()` or `Array.prototype.slice()` on an existing empty array
* Creating a new function using the `Function` constructor with no arguments
* Using a library like Lodash's `_constant()` function

However, these alternatives are not included in the provided benchmark.