Benchmark: Array slice() vs slice(0) vs spread operator - 5000 elements

Script Preparation code:

var baseArray = []
for (var i = 0; i < 5000; 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 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

Test name	Executions per second
Array.prototype.slice()	2235474.5 Ops/sec
spread operator	2496827.8 Ops/sec
Array.prototype.slice(0)	2563982.2 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 benchmark.

**What is tested?**

The provided JSON represents a JavaScript microbenchmark that compares three approaches for creating a copy of an array: `Array.prototype.slice()`, `spread operator` (new ES6 syntax), and `slice(0)` (an optimized version of `slice()`).

**Options compared:**

1. **`Array.prototype.slice()`**: This method creates a shallow copy of the original array by returning a new array object with references to the same elements as the original array.
2. **`spread operator` (`[ ...baseArray ]`)**: This syntax creates a new array by spreading the elements of `baseArray` into a new array.
3. **`slice(0)`**: This method creates an empty array and then pushes all elements from the original array onto it.

**Pros and Cons of each approach:**

1. **`Array.prototype.slice()`**:
	* Pros: Simple, widely supported, and efficient for small arrays.
	* Cons: Creates a shallow copy, which can lead to unexpected behavior when modifying the copied array.
2. **`spread operator` (`[ ...baseArray ]`)**:
	* Pros: Creates a new array with no references to the original array, making it safer for modifications.
	* Cons: May be slower due to the overhead of creating a new array and pushing elements into it.
3. **`slice(0)`**:
	* Pros: Optimized version of `slice()` that creates an empty array and pushes elements onto it, reducing memory allocation.
	* Cons: Not as widely supported as other methods.

**Library usage**

None in this benchmark.

**Special JS feature or syntax**

The benchmark uses the new ES6 spread operator (`[ ...baseArray ]`), which was introduced in ECMAScript 2015.

**Other considerations**

This benchmark is likely designed to test performance, so it's essential to consider factors like:

* Cache locality: How well do each method optimize cache usage?
* Memory allocation: Which method allocates more memory for the new array?
* Execution frequency: How many times does each method execute per second?

**Alternatives**

Other approaches for creating an array copy could include:

1. `Array.prototype.concat()`: Creates a new array by concatenating the elements of the original array.
2. `Array.prototype.slice().concat()`: Similar to `slice()` followed by `concat()`, which can be slower due to the extra function call.
3. `Object.assign()`: Not suitable for creating an array copy, as it modifies the source object.

Keep in mind that this benchmark is designed to compare specific approaches, and different performance characteristics may emerge when using alternative methods.

Related benchmarks:

Array slice() vs slice(0) vs spread operator - 5000 elements (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: 2 years ago by: Guest

Jump to the latest result

Array.prototype.slice()

spread operator

Array.prototype.slice(0)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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