Benchmark: Slice vs spread vs slice(0) 10k items 2024

Tests:

slice()
var original = Array.from({ length: 10000 }, (_, index) => ({ id: index })); var copy = original.slice();
...spread
var original = Array.from({ length: 10000 }, (_, index) => ({ id: index })); var copy = [...original];
slice(0)
var original = Array.from({ length: 10000 }, (_, index) => ({ id: index })); var copy = original.slice(0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice()
...spread
slice(0)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
slice()	3535.1 Ops/sec
...spread	3501.1 Ops/sec
slice(0)	3541.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares three approaches for creating a shallow copy of an array:

1. `slice()`
2. Spread operator (`...`)
3. `slice(0)`

In this specific benchmark, 10,000 items are created and copied using each approach.

**Options Compared**

Here's a breakdown of the options compared in the benchmark:

* **Slice**: This method uses the `Array.prototype.slice()` method to create a shallow copy of the array.
	+ Pros: Widely supported and easy to use. However, it creates a new object with references to the original elements, which can lead to unexpected behavior when modifying the copied array.
	+ Cons: Can be slower than other methods due to the overhead of creating a new array object.
* **Spread Operator (`...`)**: This method uses the spread operator to create a shallow copy of the array.
	+ Pros: Modern and efficient, as it creates a new array with references to the original elements. It's also less prone to unexpected behavior when modifying the copied array.
	+ Cons: Requires modern browsers (or polyfills) that support the spread operator.
* **Slice(0)**: This method uses `Array.prototype.slice()` followed by `(0)` to create a shallow copy of the first element of the original array, starting from index 0.
	+ Pros: Similar to `slice()`, but with an additional layer of indirection (i.e., creating another slice).
	+ Cons: Less efficient than `slice()` alone and may not be necessary in this specific benchmark.

**Library Used**

None of the benchmarks use any external libraries. The tests are self-contained and rely only on built-in JavaScript features.

**Special JS Features or Syntax**

The spread operator (`...`) is a modern feature introduced in ECMAScript 2015 (ES6). It's not supported by older browsers without polyfills.

**Benchmark Results**

The latest benchmark results show the following performance data:

* `slice(0)`: 3541.811279296875 executions per second
* `slice()`: 3535.1181640625 executions per second
* `...spread`: 3501.1162109375 executions per second

**Other Alternatives**

For creating shallow copies of arrays, other alternatives to the above methods include:

* Using `Array.prototype.concat()` and then filtering out duplicates (although this can be slower due to the overhead of iterating over the original array)
* Using a custom implementation with a loop to iterate over the original array and create a new array with references to the copied elements
* Using a library like Lodash or Underscore.js, which provide optimized implementations for creating shallow copies of arrays.

Related benchmarks:

Slice vs spread vs slice(0) 10k items 2024 (version: 0)

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

Comparing performance of: slice() vs ...spread vs slice(0)

Created: 2 years ago by: Guest

Jump to the latest result

slice()

...spread

slice(0)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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