Benchmark: Add 10 elements to an Array where each element includes an empty array

Tests:

1️⃣ Array.from
const arr = Array.from({ length: 10 }, () => []);
2️⃣ Array(10).fill().map()
const arr2 = Array(10).fill([]);
3️⃣ for loop
const arr3 = []; for (let i = 0; i < 10; i += 1) { arr3.push([]); }
4️⃣ while loop
const arr4 = []; let i = 0; while (i < 10) { arr4.push([]); i++; }
5️⃣ do while loop
const arr5 = []; let j = 0; do { arr5.push([]); j++; } while (j < 10);
6️⃣ for of loop
const arr6 = []; for (const _ of Array(10)) { arr6.push([]); }
7️⃣ es6 spread operator
const arr7 = [...Array(10)].map(() => []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1️⃣ Array.from
2️⃣ Array(10).fill().map()
3️⃣ for loop
4️⃣ while loop
5️⃣ do while loop
6️⃣ for of loop
7️⃣ es6 spread operator

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Purpose**

The benchmark measures how quickly different JavaScript approaches can create an array of 10 empty arrays.

**Approaches Compared**

1. **Array.from()**: This method creates a new Array instance from an iterable or array-like object.
2. **Array(10).fill().map()`: This approach uses the `Array` constructor to create an array with 10 elements, fills each element with an empty array using the `fill()` method, and then maps over the array to return only the empty arrays.
3. **For loop**: A traditional for loop is used to push empty arrays onto a new array.
4. **While loop**: A while loop is used to push empty arrays onto a new array.
5. **Do-while loop**: A do-while loop is used to push empty arrays onto a new array.
6. **For of loop**: This approach uses the `for...of` loop to iterate over an array and pushes empty arrays onto a new array.
7. **ES6 spread operator**: This method uses the spread operator (`...`) to create a new array with 10 elements, each containing an empty array.

**Pros and Cons**

1. **Array.from()**:
	* Pros: Fast, concise, and expressive.
	* Cons: May not be as well-known or widely supported in older browsers.
2. **Array(10).fill().map()`:
	* Pros: Well-established and widely supported, but may be less efficient due to the extra operations.
	* Cons: More verbose than other approaches.
3. **For loop**:
	* Pros: Simple and easy to understand.
	* Cons: May be slower than more modern approaches due to the overhead of pushing elements onto an array.
4. **While loop**:
	* Pros: Similar to the for loop, but with the added benefit of avoiding the index variable.
	* Cons: Still may be slower than other approaches.
5. **Do-while loop**:
	* Pros: Simple and easy to understand, similar to the while loop.
	* Cons: Similar performance characteristics as the while loop.
6. **For of loop**:
	* Pros: Concise and expressive, but may not be well-supported in older browsers.
	* Cons: May be slower than other approaches due to the overhead of iterating over an array.
7. **ES6 spread operator**:
	* Pros: Fast, concise, and expressive.
	* Cons: May not be as well-known or widely supported in older browsers.

**Library/Functionality**

None of these approaches rely on any external libraries or functions beyond what's built into the JavaScript standard library.

**Special JS Features/Syntax**

The benchmark uses ES6 features such as `Array.from()`, spread operator (`...`), and `for...of` loop. These features are not specific to this benchmark, but rather part of the modern JavaScript syntax.

Now that we've explored the benchmark, let's take a step back and summarize:

* Different approaches to creating an array of 10 empty arrays.
* Each approach has its pros and cons in terms of performance, conciseness, and expressiveness.
* The ES6 spread operator and `Array.from()` are among the fastest and most concise methods.
* For loop and while loop are simple but may be slower due to pushing elements onto an array.
* Do-while loop is similar to the while loop but with the added benefit of avoiding the index variable.

I hope this explanation helps you understand the benchmark!

Latest run results:

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

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

Browser/OS: Chrome 106 on Mac OS X 10.14.3

View result in a separate tab

Test name	Executions per second
1️⃣ Array.from	468044.8 Ops/sec
2️⃣ Array(10).fill().map()	1900099.5 Ops/sec
3️⃣ for loop	10616149.0 Ops/sec
4️⃣ while loop	11564314.0 Ops/sec
5️⃣ do while loop	11005315.0 Ops/sec
6️⃣ for of loop	2240681.0 Ops/sec
7️⃣ es6 spread operator	2182405.0 Ops/sec

Related benchmarks:

Add 10 elements to an Array where each element includes an empty array (version: 0)

Comparing performance of: 1️⃣ Array.from vs 2️⃣ Array(10).fill().map() vs 3️⃣ for loop vs 4️⃣ while loop vs 5️⃣ do while loop vs 6️⃣ for of loop vs 7️⃣ es6 spread operator

Created: 2 years ago by: Guest

Jump to the latest result

1️⃣ Array.from

2️⃣ Array(10).fill().map()

3️⃣ for loop

4️⃣ while loop

5️⃣ do while loop

6️⃣ for of loop

7️⃣ es6 spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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