Benchmark: Array slice() vs slice(0) vs spread operator

Script Preparation code:

var baseArray = []
for (var i = 0; i < 50; i++) {
  baseArray.push((Math.floor(Math.random() * Math.floor(1000000))).toString(16)) 
}

Tests:

Array.prototype.slice()
var other = baseArray.slice();
spread operator
var other = [ ...baseArray ]
Array.prototype.slice(0)
var other = baseArray.slice(0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice()
spread operator
Array.prototype.slice(0)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 days ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice()	65470908.0 Ops/sec
spread operator	58325316.0 Ops/sec
Array.prototype.slice(0)	68408024.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark definition, which includes the script preparation code, HTML preparation code (none in this case), and individual test cases.

The benchmark compares three approaches for creating a subset of an array: using `Array.prototype.slice()`, the spread operator (`...`), and `slice(0)`.

**Options Compared**

The three options are compared to determine which approach is most efficient.

* **`Array.prototype.slice()`**: This method creates a shallow copy of a portion of an array.
* **Spread Operator (`...`)**: This syntax creates a new array by spreading the elements of an existing array.
* **`slice(0)`**: This method returns a shallow copy of a portion of an array, starting from index 0.

**Pros and Cons**

1. **`Array.prototype.slice()`**:
	* Pros: widely supported, efficient for small arrays.
	* Cons: creates a new array object, which can be slower for very large arrays.
2. **Spread Operator (`...`)**:
	* Pros: concise, efficient for creating shallow copies of arrays.
	* Cons: not as widely supported as `slice()`, can be slower due to array creation.
3. **`slice(0)`**:
	* Pros: efficient for creating shallow copies of arrays, as it doesn't create a new object.
	* Cons: less intuitive than the other two options, may require additional code to handle edge cases.

**Library and Special JS Features**

None of the test cases use any libraries or special JavaScript features beyond standard ES6 syntax.

**Other Alternatives**

For creating subsets of arrays, there are other alternatives:

1. **`Array.prototype.slice()` with an offset**: Instead of using `slice(0)`, you can use `slice(offset)` to create a subset starting from a specific index.
2. **`Array.prototype.splice()`**: While not exactly the same as creating a subset, `splice()` allows you to remove and return elements from an array, which can be useful in certain scenarios.

In summary, the choice of approach depends on the specific use case and performance requirements. If you need to create a shallow copy of a small array, any of the three options are suitable. For very large arrays, `Array.prototype.slice()` might be the most efficient option due to its widespread support and optimized implementation.

Related benchmarks:

Array slice() vs slice(0) vs spread operator (version: 0)

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

Comparing performance of: Array.prototype.slice() vs spread operator vs Array.prototype.slice(0)

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.slice()

spread operator

Array.prototype.slice(0)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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