Benchmark: Array.prototype.slice vs spread operator vs Array.from

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice
spread operator
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Browser/OS: Chrome 149 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	37914408.0 Ops/sec
spread operator	27928598.0 Ops/sec
Array.from	25264732.0 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 provided benchmark.

**What is tested?**

The benchmark tests three ways to create a shallow copy of an array in JavaScript:

1. `Array.prototype.slice()`
2. The spread operator (`...`)
3. `Array.from()`

These methods are used to create a new array that contains all the elements of the original array, but with no references to the original elements.

**Options compared**

The benchmark compares the performance of these three methods in different scenarios:

* Creating an empty array and then adding elements
* Creating an array with some elements and then removing them
* Creating an array with a mix of elements (strings, numbers, booleans) and performing operations on it

**Pros and cons of each approach**

1. `Array.prototype.slice()`:
	* Pros: widely supported, efficient for large arrays
	* Cons: can be slower than other methods for small arrays, creates a new array object with references to the original elements
2. Spread operator (`...`):
	* Pros: concise and expressive syntax, efficient for large arrays
	* Cons: requires modern JavaScript support (ES6+), can create unnecessary intermediate objects
3. `Array.from()`:
	* Pros: flexible and powerful, can be used with iterators or other iterables
	* Cons: slower than slice() for small arrays, creates a new array object with references to the original elements

**Library usage**

None of the methods use external libraries.

**Special JS features or syntax**

The benchmark uses modern JavaScript features such as:

* The spread operator (`...`)
* `Array.from()` (introduced in ES6)
* Modern array literals (`[ "hello", true, 7 ]`)

These features are widely supported by most modern browsers and Node.js environments.

**Other alternatives**

There are other ways to create a shallow copy of an array in JavaScript, such as:

* Using `Array.prototype.concat()` or `Array.prototype.push()`
* Using the `JSON.parse(JSON.stringify())` method (although this can be slower and less efficient)
* Using a library like Lodash's `cloneDeep()` function

However, these alternatives are not included in the benchmark.

In summary, the benchmark tests the performance of three common methods for creating a shallow copy of an array in JavaScript: `Array.prototype.slice()`, spread operator (`...`), and `Array.from()`. Each method has its pros and cons, and the benchmark provides insights into their relative performance in different scenarios.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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