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

Tests:

Array.prototype.slice
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].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: 2 years ago)

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

Browser/OS: Opera 104 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	269902080.0 Ops/sec
spread operator	11301566.0 Ops/sec
Array.from	4002513.5 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 and explain what's being tested, compared options, pros and cons, library usage, special JavaScript features, and alternative approaches.

**Benchmark Overview**

The `MeasureThat.net` website provides a microbenchmarking platform for testing various aspects of JavaScript performance. In this case, we're comparing three methods for creating a shallow copy of an array:

1. `Array.prototype.slice()`
2. The new ES6 spread operator (`[ ...params ]`)
3. `Array.from()` method

**Comparison Options**

The benchmark is comparing the performance of these three methods in terms of execution time per second.

**Pros and Cons of Each Approach:**

*   **`Array.prototype.slice()`**: This method creates a shallow copy of an array by returning a new array with references to the same elements as the original array. It's widely supported, but can be slower than other methods due to its overhead.
*   **Spread Operator (`[ ...params ]`)**: The spread operator is a new feature in JavaScript that allows you to create a new array by spreading an existing array or object. This method creates a shallow copy of the original array by assigning it to a new variable, which can be faster than `Array.prototype.slice()`.
*   **`Array.from()`** Method: This method creates a new array from an iterable (like an array or string) and returns its length. It's more memory-intensive than `Array.prototype.slice()` but can be faster for certain use cases.

**Library Usage**

None of the methods mentioned above rely on external libraries, so there are no specific library requirements to consider.

**Special JavaScript Features**

There is no special JavaScript feature being used in this benchmark that requires a deep understanding of advanced concepts. The focus is on comparing performance between three widely supported and commonly used array copying methods.

**Alternative Approaches**

Other approaches for creating shallow copies of arrays include:

*   Using `Array.prototype.concat()`: This method creates a new array by concatenating multiple arrays or values. While it's similar to the spread operator, it returns an array with all elements from both original arrays.
*   Utilizing `Object.assign()`**: In some cases, you can use `Object.assign()` to create a shallow copy of an object (not just an array). This method copies property values from one or more source objects to a target object.

In conclusion, the benchmark provides a straightforward comparison between three common methods for creating shallow copies of arrays in JavaScript. The choice of which method is faster depends on performance requirements and specific use cases.

Related benchmarks:

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

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

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

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