Benchmark: Array.prototype.slice vs spread operator - large array 10000000

Script Preparation code:

var arr = Array.from({length: 1000000}, () => Math.random())

Tests:

Array.prototype.slice
var other = arr.slice();
spread operator
var other = [ ...arr ]

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: one year ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	1893.0 Ops/sec
spread operator	1925.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares two methods of creating a shallow copy of an array in JavaScript: the traditional `Array.prototype.slice()` method and the newer ES6 (ECMAScript 2015) spread operator (`...`). The purpose of this benchmark is to evaluate the performance of these two approaches when working with a large array consisting of 10,000,000 random numerical elements.

### Options Compared

1. **Array.prototype.slice()**
   - **Test Name**: Array.prototype.slice
   - **Benchmark Definition**: `var other = arr.slice();`
   - This method has been a staple in JavaScript for years and is widely recognized and used. It creates a shallow copy of the array by returning a new array containing the same elements as the original one.

2. **Spread Operator**
   - **Test Name**: Spread operator
   - **Benchmark Definition**: `var other = [ ...arr ];`
   - The spread operator is a feature introduced in ES6, which allows for easy copying of array elements into a new array. It has a concise syntax, making the code easier to read and write.

### Performance Results

According to the latest benchmark results:
- The spread operator achieved **1925.38 executions per second**.
- The `Array.prototype.slice()` method achieved **1893.04 executions per second**.

### Pros and Cons

**Array.prototype.slice()**
- **Pros**:
  - Well-established and widely understood by developers, often showing consistent performance across different browsers and environments.
  - Works in environments that do not support ES6 features.
  
- **Cons**:
  - Slightly more verbose than the spread operator.
  - Potentially less performant in some scenarios compared to the spread operator, as demonstrated in this benchmark.

**Spread Operator**
- **Pros**:
  - More concise and clear syntax, which makes the code more readable.
  - Performance benefits, as shown in this benchmark, especially for larger arrays.
  
- **Cons**:
  - Requires an ES6-compliant environment, which might not be available in older browsers.
  - May have less community-backed experience due to being a newer feature, which could lead to less predictable behavior in edge cases.

### Other Considerations

- **Browser Compatibility**: Both methods are well-supported in modern browsers. However, developers should ensure that their target audience uses a browser with ES6 support if they choose to use the spread operator.
- **Memory Consumption**: Both methods create a new array, which means they can consume significantly more memory if the original array is large. This is a common consideration when handling large datasets, and optimizations may be necessary.

### Alternatives

Aside from the two methods covered in this benchmark, other alternatives for copying arrays include:
- **`Array.from()`**: This method can also create a shallow copy of an array and has a slightly different syntax.
  ```javascript
  var other = Array.from(arr);
  ```
- **`Array.prototype.concat()`**: Another traditional method, which can be used to concatenate the original array with an empty array.
  ```javascript
  var other = [].concat(arr);
  ```

Each of these alternatives has its own pros and cons regarding readability, performance, and compatibility, similar to the two methods tested in this benchmark. Ultimately, the choice of which method to use will depend on the specific requirements of the application, the need for readability, and performance requirements.

Related benchmarks:

Array.prototype.slice vs spread operator - large array 10000000 (version: 1)

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

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

Created: one year 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 gpt-4o-mini, generated one year ago):