Benchmark: Slice vs spread 10k items 2024

Tests:

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

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: 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
Array.prototype.slice	3534.0 Ops/sec
spread operator	3517.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Description**

The benchmark compares the performance of two approaches: using the `Array.prototype.slice()` method and using the new ES6 spread operator (`[...]`) to create a copy of an array. The test measures which approach is faster for creating a copy of an array with 10,000 items.

**Options Compared**

Two options are compared:

1. **`Array.prototype.slice()`**: This method creates a shallow copy of the original array by iterating over its elements and adding them to a new array.
2. **Spread operator (`[...]`)**: This operator creates a deep copy of the original array by creating a new array with identical elements.

**Pros and Cons**

* **`Array.prototype.slice()`**:
	+ Pros: widely supported, well-established method, easy to understand.
	+ Cons: can be slower for large arrays due to the overhead of iterating over elements, may not create a deep copy if used on sparse arrays or arrays with non-object values.
* **Spread operator (`[...]`)**:
	+ Pros: creates a deep copy, efficient for large arrays, and well-supported in modern browsers and JavaScript engines.
	+ Cons: relatively new syntax, may take some time to get accustomed to.

**Library Used**

None. The benchmark only uses built-in JavaScript features.

**Special JS Feature or Syntax**

The spread operator (`[...]`) is a relatively new feature introduced in ES6. It allows creating a copy of an array (or other iterable) by spreading its elements into a new array.

**Other Considerations**

When choosing between `Array.prototype.slice()` and the spread operator, consider the following:

* If you need to create a shallow copy of an array with non-object values, use `slice()`.
* If you need to create a deep copy of an array or ensure that all elements are copied correctly (e.g., arrays with non-numeric values), use the spread operator.
* If performance is critical and you're working with large arrays in a modern browser or JavaScript engine, consider using the spread operator.

**Alternative Approaches**

Other approaches to creating an array copy include:

1. `Array.from()`: Creates a new array from an iterable (e.g., another array). While similar to the spread operator, it's not exactly equivalent due to differences in implementation and browser support.
2. `Array.prototype.concat()` with `Array.prototype.slice()`: Creates a shallow copy of an array by concatenating multiple copies of the original array using `concat()`.
3. `Object.assign()`: Assigns values from one or more sources to an existing target object (not directly applicable for creating an array copy, but can be used in conjunction with other methods).

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the spread operator.

Related benchmarks:

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

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

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

Created: 2 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):