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

Historical Performance Data aggregated from 112 community runs

Desktop Results:

Chrome 91 runs

Array.prototype.slice(0)

31.1M/s

Array.prototype.slice()

30.6M/s

spread operator

25.1M/s

Fastest: Array.prototype.slice(0) (1.2x faster)

View exact numbers

✓ Array.prototype.slice(0): 31,088,208 ops/sec
• Array.prototype.slice(): 30,590,714 ops/sec
• spread operator: 25,055,142 ops/sec

Firefox 21 runs

Array.prototype.slice(0)

15.6M/s

Array.prototype.slice()

15.4M/s

spread operator

2.6M/s

Fastest: Array.prototype.slice(0) (6.1x faster)

View exact numbers

✓ Array.prototype.slice(0): 15,648,601 ops/sec
• Array.prototype.slice(): 15,430,250 ops/sec
• spread operator: 2,554,443 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

Array.prototype.slice(0)

63.0M/s

Array.prototype.slice()

62.4M/s

spread operator

52.5M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.slice(0)	62,982,064 Ops/sec
Array.prototype.slice()	62,401,944 Ops/sec
spread operator	52,452,444 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

Go to the latest result

Array.prototype.slice()

spread operator

Array.prototype.slice(0)

Historical Performance Data aggregated from 112 community runs

Desktop Results:

Chrome 91 runs

Firefox 21 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Array.prototype.slice()

spread operator

Array.prototype.slice(0)

Historical Performance Data aggregated from 112 community runs

Desktop Results:

Chrome 91 runs

Firefox 21 runs

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 Array.prototype.slice(0)`