Benchmark: Array.prototype.slice vs spread operator

Tests:

Array.prototype.slice
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].slice();
spread operator
var params = [ "hello", true, 7 ] var other = [ ...params ]

Historical Performance Data aggregated from 431 community runs

Desktop Results:

Chrome 337 runs

Array.prototype.slice

104.0M/s

spread operator

75.5M/s

Fastest: Array.prototype.slice (1.4x faster)

View exact numbers

✓ Array.prototype.slice: 103,989,096 ops/sec
• spread operator: 75,529,712 ops/sec

Firefox 60 runs

Array.prototype.slice

45.5M/s

spread operator

29.9M/s

Fastest: Array.prototype.slice (1.5x faster)

View exact numbers

✓ Array.prototype.slice: 45,518,980 ops/sec
• spread operator: 29,889,504 ops/sec

Safari 18 runs

spread operator

495.5M/s

Array.prototype.slice

83.4M/s

Fastest: spread operator (5.9x faster)

View exact numbers

✓ spread operator: 495,522,336 ops/sec
• Array.prototype.slice: 83,406,608 ops/sec

Other 6 runs

Array.prototype.slice

153.4M/s

spread operator

101.7M/s

Fastest: Array.prototype.slice (1.5x faster)

View exact numbers

✓ Array.prototype.slice: 153,399,312 ops/sec
• spread operator: 101,701,248 ops/sec

Mobile Results:

Chrome 10 runs

Array.prototype.slice

52.8M/s

spread operator

37.5M/s

Fastest: Array.prototype.slice (1.4x faster)

View exact numbers

✓ Array.prototype.slice: 52,833,880 ops/sec
• spread operator: 37,467,844 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 14 days ago)

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

Browser/OS: Chrome 150 on Mac OS X 10.15.7

View result in a separate tab

Array.prototype.slice

286.8M/s

spread operator

187.0M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.slice	286,755,200 Ops/sec
spread operator	187,011,344 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the test case and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches to create a shallow copy of an array:

1. **Array.prototype.slice()**: This method returns a shallow copy of a portion of an array, leaving the rest intact. It takes two arguments: the start index (inclusive) and the end index (exclusive).
2. **Spread Operator (`...`)**: This is a new syntax introduced in ECMAScript 2015 that allows creating a new array by spreading the elements of an existing array.

**Options being compared**

The test case is comparing these two approaches for two specific scenarios:

* Creating a shallow copy of a single-element array with different data types (e.g., string, boolean, number).
* Creating a shallow copy of a multi-element array with different data types.

**Pros and Cons**

* **Array.prototype.slice()**:
	+ Pros: widely supported, has been around for a long time, and is easy to implement.
	+ Cons: can be slower than the spread operator, especially for large arrays, since it requires additional bookkeeping steps.
* **Spread Operator (`...`)**:
	+ Pros: faster than `slice()` for large arrays, as it only creates a new array reference without modifying the original array. It's also more concise and readable.
	+ Cons: not supported in older browsers or JavaScript engines that don't implement ES6 syntax.

**Library usage**

In this test case, there is no explicit library being used. However, some libraries might provide additional functionality or optimizations for these operations.

**Special JS features/syntax**

The spread operator (`...`) is a new syntax introduced in ECMAScript 2015. It's supported by most modern browsers and JavaScript engines, but may not work in older environments.

**Other alternatives**

Before the spread operator was introduced, developers used to use the `Array.prototype.concat()` method or `Array.prototype.slice().slice()` (yes, you read that right) to create shallow copies of arrays. These approaches can be slower than the spread operator and might require more code.

It's worth noting that modern JavaScript engines often optimize these operations under the hood, so the actual performance difference between these methods may vary depending on the specific implementation and use case.

Array.prototype.slice vs spread operator (version: 0)

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

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

Created: 8 years ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

Historical Performance Data aggregated from 431 community runs

Desktop Results:

Chrome 337 runs

Firefox 60 runs

Safari 18 runs

Other 6 runs

Mobile Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.slice vs spread operator (version: 0)

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

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

Created: 8 years ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

Historical Performance Data aggregated from 431 community runs

Desktop Results:

Chrome 337 runs

Firefox 60 runs

Safari 18 runs

Other 6 runs

Mobile Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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