Benchmark: Array.slice() vs. Spread operator

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'></script>

Script Preparation code:

var arr = ['one', 'two', 'three', {four: 'five'}];

Tests:

Array.slice()
var myCopy = arr.slice()
Spread operator
var myCopy = [...arr]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.slice()
Spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.slice()	37555376.0 Ops/sec
Spread operator	18941918.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 its results.

**Benchmark Overview**

The benchmark tests two ways to create a shallow copy of an array in JavaScript: the `Array.slice()` method and the spread operator (`...`).

**Options Compared**

There are two options being compared:

1. **Array.slice()**: This method returns a new array containing only the elements of the original array, starting from the first element.
2. **Spread Operator (...)**: This operator creates a new array by spreading out the elements of an existing array.

**Pros and Cons**

* **Array.slice()**:
	+ Pros: Efficient in terms of memory usage, as it only copies references to the elements.
	+ Cons: Can be slower than the spread operator due to the overhead of calling `slice()` and creating a new array object.
* **Spread Operator (...)**:
	+ Pros: Faster execution time, as it avoids the overhead of `slice()` and creates an array from scratch.
	+ Cons: More memory-intensive, as it creates a new array with all elements copied.

**Library Used**

The benchmark uses the Lodash library, which is not strictly necessary for this specific test. However, Lodash provides utilities like `lodash.cloneDeep()` that can be used to create shallow copies of arrays. In this case, the spread operator is sufficient, and Lodash is likely included as a precautionary measure.

**Special JavaScript Feature/Syntax**

The benchmark uses the spread operator (`...`), which was introduced in ECMAScript 2015 (ES6). It allows you to expand an array or object into a new instance with the same elements. This feature is supported by most modern browsers and Node.js versions.

**Alternative Approaches**

Other ways to create shallow copies of arrays include:

1. **Array.prototype.slice.call()**: Similar to `Array.slice()`, but uses the `call()` method to call the function.
2. **Array.prototype.concat()**: Creates a new array with all elements from the original array, which can be slower than both `slice()` and the spread operator.
3. **lodash.cloneDeep()**: A more comprehensive utility for creating deep copies of arrays and objects.

**Other Considerations**

When choosing between these methods, consider the trade-off between memory usage and execution speed. If you need to create a shallow copy of an array frequently, `Array.slice()` might be a better choice due to its efficiency in terms of memory usage. However, if you prioritize faster execution times, the spread operator (`...`) is likely the better option.

Keep in mind that these methods work differently depending on the JavaScript engine and browser used. The results from MeasureThat.net provide an accurate representation of performance differences across various browsers and devices.

Related benchmarks:

Array.slice() vs. Spread operator (version: 0)

For times when a shallow copy of an Array is needed, what is the performance difference between these 2 methods.

Comparing performance of: Array.slice() vs Spread operator

Created: 2 months ago by: Guest

Jump to the latest result

Array.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):