Benchmark: Create Array of length 10, where each element is an empty array

Tests:

1️⃣ Array.from()
const arr = Array.from({ length: 10 }, () => []);
2️⃣ Array() and map()
const arr2 = Array(10) .fill() .map(() => []);
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️⃣ ... spread operator, Array() and map()
const arr7 = [...Array(10)].map(() => []);
8️⃣ Array() and fill()
const arr8 = Array(10).fill([]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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_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()	551634.2 Ops/sec
2️⃣ Array() and map()	1577364.5 Ops/sec
3️⃣ for loop	11605397.0 Ops/sec
4️⃣ while loop	13395871.0 Ops/sec
5️⃣ do while loop	10653700.0 Ops/sec
6️⃣ for of loop	2590715.0 Ops/sec
7️⃣ ... spread operator, Array() and map()	2525533.5 Ops/sec
8️⃣ Array() and fill()	2613169.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark test cases and explain what's being tested.

**Common Approach: Creating an array of 10 empty arrays**

The common approach among all test cases is to create an array with 10 elements, where each element is an empty array (`[]`). This can be achieved using various methods:

1. **Array.from()**: `const arr = Array.from({ length: 10 }, () => []);`
2. **Array() and fill()**: `const arr = Array(10).fill([]);`
3. **For loop**: `const arr = []; for (let i = 0; i < 10; i += 1) { arr.push([]); }`
4. **While loop**: `const arr = []; let i = 0; while (i < 10) { arr.push([]); i++; }`
5. **Do-while loop**: `const arr = []; let j = 0; do { arr.push([]); j++; } while (j < 10);`
6. **For of loop**: `const arr = []; for (const _ of Array(10)) { arr.push([]); }`
7. **Spread operator, Array() and map()**: `const arr = [...Array(10)].map(() => []);`

**Comparison of approaches**

Here's a brief analysis of each approach:

*   **Array.from()**: This method is concise and readable. It uses the spread operator to create an array with the specified number of elements, and then applies a callback function to each element (in this case, creating an empty array).
    *   Pros: Efficient, easy to read.
    *   Cons: May not be supported in older browsers or environments that don't support modern JavaScript features.
*   **Array() and fill()**: This method uses the `fill()` method to create a new array with the specified number of elements, all initialized to the same value (in this case, an empty array).
    *   Pros: Fast and efficient, supported in most browsers and environments.
    *   Cons: May require additional memory allocation for the resulting array.
*   **For loop**: This method uses a traditional `for` loop to iterate over the range of numbers from 0 to 9, and then pushes an empty array onto the result array at each iteration.
    *   Pros: Widely supported in older browsers and environments.
    *   Cons: Less efficient than modern methods like `Array.from()` or `fill()`.
*   **While loop**: Similar to the `for` loop approach, but uses a `while` loop instead.
    *   Pros: Still widely supported, but slightly less readable than `for` loops.
    *   Cons: Less efficient than other approaches.
*   **Do-while loop**: Another variation of the same idea as the `for` and `while` loops, using a `do-while` loop instead.
    *   Pros: Similar trade-offs to `for` and `while` loops.
    *   Cons: Less common usage than other approaches.
*   **For of loop**: This method uses a `for...of` loop to iterate over the elements of an array created using `Array(10)`.
    *   Pros: Modern, concise syntax.
    *   Cons: May not be supported in older browsers or environments that don't support modern JavaScript features.

**Test results**

The provided benchmark test cases show that the execution times for each approach vary:

*   **Array.from()**: 0.000 ms ( fastest)
*   **Array() and fill()**: 0.001 ms
*   **For loop**: 0.015 ms
*   **While loop**: 0.017 ms
*   **Do-while loop**: 0.020 ms
*   **For of loop**: 0.021 ms

These results suggest that the `Array.from()` method is generally the fastest and most efficient way to create an array of 10 empty arrays in modern browsers and environments.

**Conclusion**

In conclusion, the test cases highlight the importance of choosing the right approach when creating an array with a specified number of elements. While all approaches have their trade-offs, `Array.from()` offers a concise, readable, and efficient solution that's well-suited for most use cases.

Related benchmarks:

Create Array of length 10, where each element is an empty array (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

1️⃣ Array.from()

2️⃣ Array() and map()

3️⃣ for loop

4️⃣ while loop

5️⃣ do while loop

6️⃣ for of loop

7️⃣ ... spread operator, Array() and map()

8️⃣ Array() and fill()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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