Benchmark: Array.prototype.slice vs spread operator on a bigger array

Script Preparation code:

var array = Array(10000).fill(null)

Tests:

Array.prototype.slice
var otherArray = array.slice();
spread operator
var otherArray = [...array];

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 year ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	906220.6 Ops/sec
spread operator	120761.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark test and explain what's being tested, compared, and their pros and cons.

**What is being tested?**

The benchmark tests two ways to create a copy of an array in JavaScript:

1. **`Array.prototype.slice()`**: This method returns a shallow copy of a portion of an array.
2. **Spread operator (`...`)**: This operator creates a new array from the elements of an existing array.

**Options being compared**

The benchmark compares the performance of these two approaches on a larger array (10,000 elements).

**Pros and Cons of each approach:**

* **`Array.prototype.slice()`**:
	+ Pros:
		- Widely supported and well-documented.
		- Efficient for small to medium-sized arrays.
	+ Cons:
		- Can be slow for large arrays due to the overhead of creating a new array object.
		- May not perform as well on older browsers or with certain array implementations.
* **Spread operator (`...`)**:
	+ Pros:
		- More concise and expressive than `slice()`.
		- Often faster than `slice()` for large arrays due to the use of a more efficient algorithm.
	+ Cons:
		- Not supported in older browsers or with certain array implementations (e.g., IE8).
		- May require additional memory allocation.

**Library/Functionality used**

In this benchmark, no libraries are explicitly mentioned. However, it's worth noting that the spread operator was introduced as a part of the ECMAScript 2015 standard and has since been adopted by most modern browsers.

**Special JS features/syntax**

The benchmark uses the newer spread operator syntax, which is supported in modern JavaScript engines. If the test were to use an older syntax or engine (e.g., `Array.prototype.slice.call()`), it would not produce the same results.

**Other alternatives**

If you wanted to test other approaches to creating array copies, some alternatives might include:

* **`Array.from()`**: A method that creates a new array from an iterable or array-like object. While not directly comparable to `slice()` and spread operator, it can be used in similar contexts.
* **`concat()`**: A method that concatenates two arrays and returns a new array. This approach can be less efficient than `slice()` and spread operator for large arrays.

In summary, this benchmark tests the performance of two widely used approaches to creating array copies: `Array.prototype.slice()` and the spread operator (`...`). The spread operator is likely to perform better for larger arrays due to its more efficient algorithm, but it may not be supported in older browsers or with certain array implementations.

Related benchmarks:

Array.prototype.slice vs spread operator on a bigger array (version: 0)

Compare the new ES6 spread operator with the traditional slice() method on a bigger array.

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

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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