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

Test name	Executions per second
Array clone with spread operator	16491702.0 Ops/sec
Array clone with slice	13509463.0 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.

Related benchmarks:

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

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

Created: 5 years ago by: Guest

Jump 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):