Benchmark: JavaScript spread operator vs Slice/Splice performance testing

Script Preparation code:

const ITERATIONS = 500000;
var index = ITERATIONS / 2;
var n = Math.random();

var list = [];
for (let i = 0; i < length; i += 1) {
    list.push(Math.random());
}

Tests:

Array clone with spread operator
const clone = [...list];
Array clone with slice
const clone = list.slice();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array clone with spread operator
Array clone with slice

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.1

View result in a separate tab

Array clone with spread operator

16.5M/s

Array clone with slice

13.5M/s

View exact numbers

Test name	Executions per second
✓ Array clone with spread operator	16,491,702 Ops/sec
Array clone with slice	13,509,463 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is tested?**

The provided JSON benchmark tests the performance of two approaches to create a copy of an array: the spread operator (`...`) and the `slice()` method.

**Options compared**

The benchmark compares the performance of these two methods:

1. **Spread Operator (`...`)**: This method creates a new array by copying elements from the original array.
2. **Slice (`slice()`)**: This method returns a shallow copy of a portion of an array, starting at the specified start index and ending at the specified end index.

**Pros and Cons**

* **Spread Operator (`.slice()` alternative)**:
	+ Pros:
		- More concise and expressive code
		- Can be used to create copies of objects as well
	+ Cons:
		- May not work as expected for large arrays, as it uses a temporary array
		- Not supported in older browsers (pre ES6)
* **Slice (`slice()`)**:
	+ Pros:
		- Works with large arrays and is more efficient than the spread operator
		- Has better performance on older browsers (pre ES6)
	+ Cons:
		- Less concise and less expressive code
		- May not work as expected for objects, only arrays

**Library usage**

In this benchmark, no specific library is used.

**Special JavaScript features or syntax**

This benchmark uses the following special feature:

* **Destructuring assignment**: The spread operator (`...`) uses destructuring assignment to create a new array.
* **Template literals**: Although not explicitly used in this benchmark, template literals are mentioned in the script preparation code. Template literals were introduced in ES6 and provide a concise way to embed expressions inside string literals.

**Alternatives**

Other alternatives for creating copies of arrays or objects include:

* Using `Array.prototype.slice.call()` with an array constructor (e.g., `new Array(length)`).
* Using `Object.assign()`, which creates a shallow copy of an object.
* Using the `lodash` library's `cloneDeep()` function, which can create deep copies of complex data structures.

Keep in mind that these alternatives may have different performance characteristics or requirements depending on the specific use case.

JavaScript spread operator vs Slice/Splice performance testing (version: 0)

Comparing performance of: `Array clone with spread operator vs Array clone with slice`

Created: 6 years ago by: Guest

Go to the latest result

Array clone with spread operator

Array clone with slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JavaScript spread operator vs Slice/Splice performance testing (version: 0)

Comparing performance of: Array clone with spread operator vs Array clone with slice

Created: 6 years ago by: Guest

Go to the latest result

Array clone with spread operator

Array clone with slice

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 clone with spread operator vs Array clone with slice`