Benchmark: Array.prototype.slice vs spread operator performance

Script Preparation code:

var arr = ["hatsune miku", true, 39];

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	12690327.0 Ops/sec
spread operator	11816821.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares the performance of two approaches: `Array.prototype.slice()` and the new ES6 spread operator (`...`). The test creates an array `arr` with three elements, including a string and a boolean, and then measures the execution time of two separate tests:

1. `var other = arr.slice();`: This test uses the traditional `slice()` method to create a shallow copy of the original array.
2. `var other = [...arr];`: This test uses the spread operator (`...`) to create a new array with the same elements as the original array.

**Options compared:**

The benchmark is comparing two options:

1. **Traditional `slice()` method**: This approach has been widely used in JavaScript for creating copies of arrays.
2. **New ES6 spread operator**: Introduced in ECMAScript 2015, this operator provides a concise way to create new arrays with the same elements as an existing array.

**Pros and cons of each approach:**

1. **Traditional `slice()` method**:
	* Pros:
		+ Wide support across older browsers and environments.
		+ Easy to understand and implement.
	* Cons:
		+ Can be slower than the spread operator, especially for large arrays.
2. **New ES6 spread operator**:
	* Pros:
		+ Faster execution time compared to the traditional `slice()` method.
		+ More concise and readable syntax.
	* Cons:
		+ Requires modern browsers or environments that support ES6.

**Library and purpose:**

In this benchmark, no external libraries are used. The spread operator is a built-in JavaScript feature introduced in ECMAScript 2015.

**Special JS features or syntax:**

There are no special JavaScript features or syntax mentioned in the provided code snippets. However, it's worth noting that the spread operator was not widely supported until ES6, so this benchmark assumes a modern environment.

**Other alternatives:**

If you're looking for alternative ways to create copies of arrays, there are other approaches:

1. **Array.prototype.slice.call()**: This method creates an array from an existing array or a non-array value.
2. **Array.from()**: This method creates a new array from an existing array-like object or an iterable.

Keep in mind that these alternatives might have different performance characteristics compared to the traditional `slice()` method and the spread operator.

In conclusion, this benchmark provides a simple and straightforward comparison between two approaches for creating copies of arrays. It's useful for understanding the performance implications of using the new ES6 spread operator versus the traditional `slice()` method.

Related benchmarks:

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

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

Comparing performance of: Array.prototype.slice vs spread operator

Created: 8 months ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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