Benchmark: compare the ways to generate a random array for iteration + while

compare the ways to generate a random array for iteration + while (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(n)] vs Array(n).fill(null) vs Array.from({ length: n }) vs Array.from({ length:n }, (item, i) => i) vs while(up--) myArray.push(Math.random());`

Created: 2 years ago by: Guest

Go to the latest result

Tests:

[...Array(n)]
[...Array(1000)].map(() => Math.random());
Array(n).fill(null)
Array(1000).fill(null).map(() => Math.random());
Array.from({ length: n })
Array.from({ length: 1000 }).map(() => Math.random());
Array.from({ length:n }, (item, i) => i)
Array.from({ length:1000 }, () => Math.random());
while(up--) myArray.push(Math.random());
let myArray = []; let up = 1000; while(up--) myArray.push(Math.random());

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Array(n).fill(null)

11K/s

[...Array(n)]

11K/s

while(up--) myArray.push(Math.random());

10K/s

Array.from({ length: n })

8K/s

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

7K/s

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

View exact numbers

✓ Array(n).fill(null): 10,808 ops/sec
• [...Array(n)]: 10,625 ops/sec
• while(up--) myArray.push(Math.random());: 10,129 ops/sec
• Array.from({ length: n }): 7,852 ops/sec
• Array.from({ length:n }, (item, i) => i): 7,369 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(n)]
Array(n).fill(null)
Array.from({ length: n })
Array.from({ length:n }, (item, i) => i)
while(up--) myArray.push(Math.random());

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)

109K/s

[...Array(n)]

108K/s

while(up--) myArray.push(Math.random());

60K/s

Array.from({ length: n })

21K/s

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

20K/s

View exact numbers

Test name	Executions per second
✓ Array(n).fill(null)	108,739 Ops/sec
[...Array(n)]	107,696 Ops/sec
while(up--) myArray.push(Math.random());	60,162 Ops/sec
Array.from({ length: n })	20,517 Ops/sec
Array.from({ length:n }, (item, i) => i)	20,048 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The `MeasureThat.net` benchmark compares different ways to generate an array for iteration and while loops. The benchmark has four test cases:

1. `Array.from({ length: n })`
2. `Array.from({ length:n }, (item, i) => i)`
3. `while(up--) myArray.push(Math.random());`
4. `[...Array(n)].map(() => Math.random());` and its variants

**Option Comparison**

Here's a brief explanation of each option:

1. **`Array.from({ length: n })`**: This method creates an array from a specified length using the `from` method. It's concise and efficient.
2. **`Array.from({ length:n }, (item, i) => i)`**: This method adds an additional step by mapping each index to itself. While it might seem unnecessary, it can be beneficial for certain use cases where you need to access both the value and its index.
3. **`while(up--) myArray.push(Math.random());`**: This traditional loop is often less efficient than modern array creation methods like `Array.from`. However, it's useful for demonstrating older JavaScript techniques.
4. **`[...Array(n)].map(() => Math.random())`** (and its variants): These methods create an array and then map over it to generate random values. This approach can be slower due to the overhead of mapping.

**Pros and Cons**

Here are some pros and cons for each option:

1. **`Array.from({ length: n })`**:
	* Pros: Concise, efficient, and modern.
	* Cons: None significant.
2. **`Array.from({ length:n }, (item, i) => i)`**:
	* Pros: Provides access to both value and index, useful for certain use cases.
	* Cons: Adds unnecessary complexity and potential performance overhead.
3. **`while(up--) myArray.push(Math.random());`**:
	* Pros: Traditional loop, easy to understand.
	* Cons: Inefficient compared to modern array creation methods.
4. **`[...Array(n)].map(() => Math.random())` (and its variants)**:
	* Pros: Demonstrates traditional array mapping.
	* Cons: Can be slower due to mapping overhead.

**Library and Special JS Features**

In this benchmark, the following libraries or special JavaScript features are used:

* None explicitly mentioned; however, `Array.from()` is a built-in method, and the destructuring operator (`[...Array(n)]`) is a modern feature introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

If you're interested in exploring alternative array creation methods, consider the following:

* `Array.prototype.fill()`: Fills an existing array with a specified value.
* `new Array(n)`: Creates a new, empty array of length `n`.
* `Array.create()`: Creates a new array object (not as commonly used).

Keep in mind that performance differences between these methods might not be significant for small arrays or simple use cases. However, when working with large datasets or performance-critical code, using efficient array creation methods like `Array.from()` can make a noticeable difference.

I hope this explanation helps you understand the benchmark and the options being compared!

compare the ways to generate a random array for iteration + while (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(n)] vs Array(n).fill(null) vs Array.from({ length: n }) vs Array.from({ length:n }, (item, i) => i) vs while(up--) myArray.push(Math.random());

Created: 2 years ago by: Guest

Go to the latest result

[...Array(n)]

Array(n).fill(null)

Array.from({ length: n })

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

while(up--) myArray.push(Math.random());

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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(n)] vs Array(n).fill(null) vs Array.from({ length: n }) vs Array.from({ length:n }, (item, i) => i) vs while(up--) myArray.push(Math.random());`