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

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

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

Created: one year ago by: Registered User

Jump 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);

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)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll do my best to explain the benchmark and its results.

**What is being tested?**

The benchmark is measuring the performance of different ways to create an empty array for iteration in JavaScript. The test cases compare four approaches:

1. `Array.apply(null, Array(1000))` (using `apply` method)
2. Destructuring operator: `[...Array(1000)]`
3. `Array.prototype.fill()` with a value of `null`: `Array(1000).fill(null)`
4. `Array.from()` with an object having a `length` property set to 1000: `Array.from({ length: 1000 })`

**Options compared**

The benchmark compares the performance of these four approaches in terms of the number of executions per second.

**Pros and cons of each approach**

1. **`Array.apply(null, Array(1000))`**: This approach is straightforward and easy to read. However, it creates a new array object with 1000 elements, which can be memory-intensive.
2. **Destructuring operator: `[...Array(1000)]`**: This approach uses the spread operator to create an empty array with 1000 elements. It's concise and modern, but might not be as readable for some developers.
3. **`Array.prototype.fill()` with a value of `null`: `Array(1000).fill(null)`**: This approach creates an empty array by filling it with `null` values. It's efficient in terms of memory usage but can lead to unexpected behavior if the array is not used correctly.
4. **`Array.from()` with an object having a `length` property set to 1000: `Array.from({ length: 1000 })`**: This approach creates an empty array by using the `from()` method on an object with a specified `length`. It's efficient and modern, but might not be as readable for some developers.

**Library usage**

None of the test cases use any external libraries.

**Special JS features or syntax**

The benchmark uses:

1. Destructuring operator (`[...Array(1000)]`): A modern JavaScript feature introduced in ES6.
2. `Array.prototype.fill()` with a value of `null`: A standard method of the `Array` prototype, but its use can be unusual.

**Other alternatives**

Other ways to create an empty array for iteration include:

1. Using a generator function: `function* emptyArrayGenerator() { yield; }`
2. Using a closure: `(function() { })();`
3. Creating an empty array with the `new Int8Array(0)` constructor.

Keep in mind that these alternatives might have different performance characteristics or use more memory than the approaches tested in the benchmark.

Latest run results:

Run details: (Test run date: 15 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.apply(null, Array(n))	85400.5 Ops/sec
[...Array(n)]	166490.1 Ops/sec
Array(n).fill(null)	439787.9 Ops/sec
Array.from({ length: n })	293047.4 Ops/sec
Array.from({ length:n }, (item, i) => i)	534151.1 Ops/sec

Related benchmarks:

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

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

Created: one year ago by: Registered User

Jump to the latest result

Array.apply(null, Array(n))

[...Array(n)]

Array(n).fill(null)

Array.from({ length: n })

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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