Benchmark: 2D array copy | slice vs spread operator vs loop

Tests:

Array.prototype.slice
let param = new Array(50); for (let a = 0; a < 50; a++) { param[a] = new Array(50); for (let b = 0; b < 50; b++) { param[a][b] = b; } } let ans = []; for (let i = 0; i < param.length; i++) { ans.push(param[i].slice()); }
spread operator
let param = new Array(50); for (let a = 0; a < 50; a++) { param[a] = new Array(50); for (let b = 0; b < 50; b++) { param[a][b] = b; } } let ans = []; for (let i = 0; i < 50; i++) { ans.push([...param[i]]); }
simple loop
let param = new Array(50); for (let a = 0; a < 50; a++) { param[a] = new Array(50); for (let b = 0; b < 50; b++) { param[a][b] = b; } } let ans = []; for (let i = 0; i < 50; i++) { ans.push([]); for(let j = 0; j < 50; j++) { ans[i].push(param[i][j]); } }
placement loop
let param = new Array(50); for (let a = 0; a < 50; a++) { param[a] = new Array(50); for (let b = 0; b < 50; b++) { param[a][b] = b; } } let ans = []; for (let i = 0; i < 50; i++) { ans.push([]); for(let j = 0; j < 50; j++) { ans[i][j] = param[i][j]; } }
pre-built array loop
let param = new Array(50); for (let a = 0; a < 50; a++) { param[a] = new Array(50); for (let b = 0; b < 50; b++) { param[a][b] = b; } } let ans = new Array(50); for (let i = 0; i < 50; i++) { ans[i] = new Array(50); for(let j = 0; j < 50; j++) { ans[i][j] = param[i][j]; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice
spread operator
simple loop
placement loop
pre-built array loop

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is tested?**

The provided JSON represents a benchmark that tests different approaches to copying 2D arrays in JavaScript. The test cases compare:

1. `Array.prototype.slice()`: Using the built-in `slice()` method to create a shallow copy of a sub-array.
2. Spread operator (`...`): Using the spread operator to create a new array by spreading the elements of an existing array.
3. Simple loop: Creating a new 2D array using a nested loop to iterate over the elements and assign them to the new array.
4. Placement loop: Creating a new 2D array with the correct dimensions and then assigning the values from the original array.

**Options compared**

The benchmark compares the performance of these four approaches:

* `Array.prototype.slice()`: A convenient, built-in method for creating shallow copies.
* Spread operator (`...`): A concise way to create new arrays by spreading existing ones.
* Simple loop: A more verbose approach that iterates over the elements and assigns them manually.
* Placement loop: Similar to simple loop but with the correct dimensions.

**Pros and Cons**

Here's a brief summary of each approach:

* `Array.prototype.slice()`:
	+ Pros: Convenient, efficient, and widely supported.
	+ Cons: Creates a shallow copy, which might not be suitable for all use cases.
* Spread operator (`...`):
	+ Pros: Concise, easy to read, and creates a new array with the correct dimensions.
	+ Cons: Can be slower than `slice()` for large arrays.
* Simple loop:
	+ Pros: Provides control over the copy process, but can be verbose.
	+ Cons: Error-prone if not implemented correctly.
* Placement loop:
	+ Pros: Similar to simple loop but with the correct dimensions.
	+ Cons: May still lead to errors if not implemented carefully.

**Other considerations**

When choosing an approach, consider factors such as:

* Performance: `Array.prototype.slice()` is likely the fastest, followed by the spread operator and then the placement/ simple loops.
* Code readability: The spread operator and simple loop might be more readable for developers familiar with these constructs.
* Error handling: Be cautious when using manual loops to avoid common pitfalls like indexing errors or out-of-bounds accesses.

**Alternatives**

If you're interested in exploring alternative approaches, consider the following:

* Using `Array.from()` and `map()` to create new arrays.
* Implementing a custom copying function using `forEach()` or `reduce()`.
* Leveraging modern JavaScript features like `Map` and `Set` for efficient array management.

Keep in mind that the performance differences between these approaches might be negligible in many cases. However, understanding the trade-offs can help you make informed decisions about your code's design and optimization.

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	90581.1 Ops/sec
spread operator	75011.2 Ops/sec
simple loop	47337.9 Ops/sec
placement loop	48863.9 Ops/sec
pre-built array loop	47110.8 Ops/sec

Related benchmarks:

2D array copy | slice vs spread operator vs loop (version: 0)

Compare 2D array copy with the spread operator vs slice vs loop

Comparing performance of: Array.prototype.slice vs spread operator vs simple loop vs placement loop vs pre-built array loop

Created: one month ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

simple loop

placement loop

pre-built array loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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