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

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

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 18 runs

Array(n).fill(null)

376K/s

[...Array(n)]

370K/s

Array.apply(null, Array(n))

240K/s

Array.from({ length: n })

37K/s

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

33K/s

Fastest: Array(n).fill(null) (11.3x faster)

View exact numbers

✓ Array(n).fill(null): 375,833 ops/sec
• [...Array(n)]: 370,173 ops/sec
• Array.apply(null, Array(n)): 239,836 ops/sec
• Array.from({ length: n }): 36,564 ops/sec
• Array.from({ length:n }, (item, i) => i): 33,156 ops/sec

Firefox 9 runs

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

111K/s

Array(n).fill(null)

89K/s

Array.from({ length: n })

82K/s

[...Array(n)]

56K/s

Array.apply(null, Array(n))

19K/s

Fastest: Array.from({ length:n }, (item, i) => i) (5.8x faster)

View exact numbers

✓ Array.from({ length:n }, (item, i) => i): 111,016 ops/sec
• Array(n).fill(null): 89,303 ops/sec
• Array.from({ length: n }): 82,083 ops/sec
• [...Array(n)]: 55,516 ops/sec
• Array.apply(null, Array(n)): 19,124 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Linux

View result in a separate tab

Array(n).fill(null)

456K/s

[...Array(n)]

426K/s

Array.apply(null, Array(n))

193K/s

Array.from({ length: n })

24K/s

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

23K/s

View exact numbers

Test name	Executions per second
✓ Array(n).fill(null)	456,427 Ops/sec
[...Array(n)]	426,168 Ops/sec
Array.apply(null, Array(n))	192,622 Ops/sec
Array.from({ length: n })	24,356 Ops/sec
Array.from({ length:n }, (item, i) => i)	23,132 Ops/sec

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

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

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

Historical Performance Data aggregated from 27 community runs

Desktop Results:

Chrome 18 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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