Benchmark: Create Square 2D Array Extended

Create Square 2D Array Extended (version: 0)

Create a 2D "square" array that is filled with arrays of the same length.

Comparing performance of: While Loop with declaration vs While Loop with Slice vs While Loop with Push and Slice vs While Loop with Push vs Array.from with map vs Array.from with map and slice vs While Loop with Slice and Internal Declaration

Created: 4 years ago by: Guest

Jump to the latest result

Script Preparation code:

var size = 15;

AخA
 
var size = 15;

Tests:

While Loop with declaration

const array = [];
array.length = size;

let index = array.length;

while (index-- > 0) {
	const temp = [];
  	temp.length = size;
  	array[index] = temp;
}

​x
 
const array = [];array.length = size;​let index = array.length;​while (index-- > 0) {    const temp = [];    temp.length = size;    array[index] = temp;}

While Loop with Slice
const array = []; array.length = size; let index = array.length; const temp = []; temp.length = size; while (index-- > 0) array[index] = temp.slice(0);
const array = [];
array.length = size;

let index = array.length;

const temp = [];
temp.length = size;

while (index-- > 0) array[index] = temp.slice(0);
While Loop with Push and Slice
const array = []; array.length = size; let index = array.length; const temp = []; temp.length = size; while (index-- > 0) array.push(temp.slice(0));
const array = [];
array.length = size;

let index = array.length;

const temp = [];
temp.length = size;

while (index-- > 0) array.push(temp.slice(0));

While Loop with Push

const array = [];
array.length = size;

let index = size;

while (index-- > 0) {
	const temp = [];
  	temp.length = size;
  	array.push(temp);
}

 
const array = [];array.length = size;​let index = size;​while (index-- > 0) {    const temp = [];    temp.length = size;    array.push(temp);}

Array.from with map
const array = Array.from(Array(size), () => { const temp = []; temp.length = size; return temp; });
const array = Array.from(Array(size), () => {
const temp = [];
temp.length = size;
return temp;
});
Array.from with map and slice
const temp = []; temp.length = size; const array = Array.from(temp, () => temp.slice());
const temp = [];
temp.length = size;

const array = Array.from(temp, () => temp.slice());
While Loop with Slice and Internal Declaration
const array = []; array.length = size; let index = array.length; while (index-- > 0) { const temp = []; temp.length = size; array[index] = temp; }
const array = [];
array.length = size;

let index = array.length;

while (index-- > 0) {
const temp = [];
temp.length = size;
array[index] = temp;
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
While Loop with declaration
While Loop with Slice
While Loop with Push and Slice
While Loop with Push
Array.from with map
Array.from with map and slice
While Loop with Slice and Internal Declaration

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
While Loop with declaration	291005.3 Ops/sec
While Loop with Slice	1496097.1 Ops/sec
While Loop with Push and Slice	1413510.1 Ops/sec
While Loop with Push	287501.0 Ops/sec
Array.from with map	227292.5 Ops/sec
Array.from with map and slice	665677.4 Ops/sec
While Loop with Slice and Internal Declaration	298060.1 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks!

Benchmark Overview

The provided benchmark measures the performance of different approaches to create a 2D "square" array filled with arrays of the same length. The benchmark consists of six test cases, each using a distinct method to generate the 2D array.

Test Cases and Approaches

Here's a brief description of each test case and its approach:

While Loop with Declaration
- Approach: Use a while loop with a decrementing index to push elements into an array.
- Pros: Simple, easy to understand.
- Cons: May have higher overhead due to the use of push() method.
While Loop with Slice
- Approach: Use a while loop with a decrementing index to access and slice an array.
- Pros: Similar performance to declaration-based approach but with less overhead from push().
- Cons: Requires more complex indexing logic.
While Loop with Push and Slice
- Approach: Use a while loop with a decrementing index to push elements into an array using the push() method, followed by slicing each element.
- Pros: Combines benefits of both approaches but introduces additional overhead from slice().
- Cons: More complex logic compared to declaration-based approach.
Array.from with map
- Approach: Utilize the Array.from() method and the map() function to generate the 2D array.
- Pros: Simplifies code and leverages optimized functions for performance.
- Cons: May require additional overhead due to function call and initialization.
Array.from with map and slice
- Approach: Similar to the previous approach but uses slicing after mapping each element.
- Pros: Combines benefits of map() and slice(), offering a balance between code simplicity and performance.
- Cons: Requires additional overhead from function call and initialization.
While Loop with Slice and Internal Declaration
- Approach: Use an internal declaration (variable scope) to create the 2D array by pushing elements into an array using slicing.
- Pros: Offers similar benefits as the previous approach but with less external visibility of variable declarations.
- Cons: May require additional understanding of scoping rules.

Other Considerations

When evaluating these approaches, consider factors such as:

Cache locality and memory allocation
Function call overhead and optimization
Array indexing and slicing efficiency
Code simplicity, readability, and maintainability

Conclusion

Each approach has its strengths and weaknesses. The choice between them depends on the specific requirements of your project, including performance, code complexity, and personal preference. By understanding the trade-offs involved in each method, you can select the most suitable approach for your use case.

In general, Array.from() with map offers a good balance between simplicity and performance. However, if readability is crucial or you prioritize caching effects due to array indexing patterns, one of the while loop approaches might be more suitable.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

**Test Cases and Approaches**

Here's a brief description of each test case and its approach:

1. **While Loop with Declaration**
	* Approach: Use a while loop with a decrementing index to push elements into an array.
	* Pros: Simple, easy to understand.
	* Cons: May have higher overhead due to the use of `push()` method.
2. **While Loop with Slice**
	* Approach: Use a while loop with a decrementing index to access and slice an array.
	* Pros: Similar performance to declaration-based approach but with less overhead from `push()`.
	* Cons: Requires more complex indexing logic.
3. **While Loop with Push and Slice**
	* Approach: Use a while loop with a decrementing index to push elements into an array using the `push()` method, followed by slicing each element.
	* Pros: Combines benefits of both approaches but introduces additional overhead from `slice()`.
	* Cons: More complex logic compared to declaration-based approach.
4. **Array.from with map**
	* Approach: Utilize the `Array.from()` method and the `map()` function to generate the 2D array.
	* Pros: Simplifies code and leverages optimized functions for performance.
	* Cons: May require additional overhead due to function call and initialization.
5. **Array.from with map and slice**
	* Approach: Similar to the previous approach but uses slicing after mapping each element.
	* Pros: Combines benefits of `map()` and `slice()`, offering a balance between code simplicity and performance.
	* Cons: Requires additional overhead from function call and initialization.
6. **While Loop with Slice and Internal Declaration**
	* Approach: Use an internal declaration (variable scope) to create the 2D array by pushing elements into an array using slicing.
	* Pros: Offers similar benefits as the previous approach but with less external visibility of variable declarations.
	* Cons: May require additional understanding of scoping rules.

**Other Considerations**

When evaluating these approaches, consider factors such as:

* Cache locality and memory allocation
* Function call overhead and optimization
* Array indexing and slicing efficiency
* Code simplicity, readability, and maintainability

**Conclusion**

In general, `Array.from() with map` offers a good balance between simplicity and performance. However, if readability is crucial or you prioritize caching effects due to array indexing patterns, one of the while loop approaches might be more suitable.

Related benchmarks: