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());
}

​x
 
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]]);
}

 
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]);
  }
}

 
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]);
  }
}

 
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];
  }
}

 
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];
  }
}

 
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

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
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: 7 months 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 6 months ago):

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

Array.prototype.slice: Uses the slice() method to create a shallow copy of the 2D array.
Spread Operator (...): Uses the spread operator to create a new array with the elements of the original 2D array.
Simple Loop: Creates a new array and populates it by iterating through each element of the original 2D array using nested loops.
Constants Loop: Similar to the simple loop, but uses constants for the loop variables instead of declaring them inside the loop.
Placement Loop: Creates a new array and assigns elements from the original 2D array directly, without creating an intermediate array.
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:

Pre-built Array Loop: 3661.990234375 executions per second
Array.prototype.slice: 3860.25048828125 executions per second (slightly faster than expected)
Spread Operator (...): 3858.05859375 executions per second
Simple Loop: 3821.356689453125 executions per second
Constants Loop: 3803.83251953125 executions per second
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.

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: 7 months ago by: Guest

Jump to the latest result