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]; } }
optimizing 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 = new Array(50); for (let i = 0; i < param.length; i++) { ans[i] = param[i].slice(); }
optimizing 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 = new Array(50); for (let i = 0; i < param.length; i++) { ans[i] = [...param[i]]; }

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
optimizing slice
optimizing spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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

optimizing slice

91K/s

Array.prototype.slice

89K/s

spread operator

75K/s

optimizing spread operator

75K/s

placement loop

47K/s

simple loop

46K/s

pre-built array loop

46K/s

View exact numbers

Test name	Executions per second
✓ optimizing slice	91,354 Ops/sec
Array.prototype.slice	89,419 Ops/sec
spread operator	75,148 Ops/sec
optimizing spread operator	74,597 Ops/sec
placement loop	46,859 Ops/sec
simple loop	46,007 Ops/sec
pre-built array loop	45,793 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain the results.

**Benchmark Overview**

The benchmark consists of multiple test cases, each measuring the performance of different approaches for creating a copy of an array in JavaScript:

1. `Array.prototype.slice()`
2. Using the spread operator (`...`)
3. Optimized versions of the above two (marked as "optimizing slice" and "optimizing spread operator")
4. Two other approaches: "placement loop" and "pre-built array loop"

**Performance Comparison**

The benchmark measures the number of executions per second for each test case across multiple browser runs on a desktop device.

Here's a summary of the results:

* **`Array.prototype.slice()`**: 89418.75 executions/second
* **Using the spread operator (`...`)**: 75147.515625 executions/second
* **Optimized version of `slice()`**: 91354.1796875 executions/second ( fastest)
* **Optimized version of spread operator**: 74597.359375 executions/second
* **Placement loop**: 46858.73046875 executions/second ( slowest)
* **Pre-built array loop**: 45792.75390625 executions/second

**Insights**

1. The optimized `slice()` approach outperforms the original spread operator method.
2. Optimizing the spread operator also improves its performance.
3. Both `placement loop` and `pre-built array loop` approaches are slower than the other methods.

The results suggest that:

* Creating a copy of an array using `Array.prototype.slice()` is generally faster than using the spread operator.
* Optimizations for both `slice()` and the spread operator can significantly improve performance.
* The `placement loop` approach is much slower, likely due to its inefficient algorithm.

Keep in mind that these results may not generalize across all browsers, devices, or edge cases. However, they provide a general insight into the relative performance of different approaches for creating an array copy in JavaScript.

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 vs optimizing slice vs optimizing spread operator`

Created: one year ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

simple loop

placement loop

pre-built array loop

optimizing slice

optimizing spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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 vs optimizing slice vs optimizing spread operator

Created: one year ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

simple loop

placement loop

pre-built array loop

optimizing slice

optimizing spread operator

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.prototype.slice vs spread operator vs simple loop vs placement loop vs pre-built array loop vs optimizing slice vs optimizing spread operator`