Benchmark: Array.prototype.slice vs spread operator vs Object.values (new rev)

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice
spread operator
Object.values

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	257322224.0 Ops/sec
spread operator	10695043.0 Ops/sec
Object.values	10996750.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Purpose:**
The benchmark is designed to compare the performance of three ways to create a shallow copy of an array in JavaScript:

1. `Array.prototype.slice()`
2. The spread operator (`[ ... ]`)
3. `Object.values()` (specifically, using it as if it were an array)

These methods are often used interchangeably, but their syntax and behavior can vary.

**Options Compared:**

* **`Array.prototype.slice()`**: This method creates a shallow copy of the entire array, starting from the first element.
	+ Pros: Widely supported, simple syntax.
	+ Cons: Can be slower for large arrays, as it involves creating a new array and copying elements one by one.
* **Spread Operator (`[ ... ]`)**: This method uses the spread operator to create a new array with the same elements as the original array.
	+ Pros: Modern syntax, efficient, and often faster than `slice()`.
	+ Cons: Requires modern browsers that support the spread operator.
* **`Object.values()`**: This method returns an array containing the values of each property in the object. In this benchmark, it's used to create a shallow copy of the original array.
	+ Pros: Efficient, works with objects and arrays, relatively simple syntax.
	+ Cons: May require additional libraries or polyfills for older browsers.

**Library Usage:**
None of the methods mentioned above use any external libraries in this specific benchmark. However, if you're using these methods in a production context, you might be relying on libraries like Lodash (`_.slice()`, `_cloneDeep()`), Immutable.js (`_.map()`, `_.clone()`) or Array.prototype extensions like `Array.from()`.

**Special JavaScript Feature/Syntax:**
The spread operator is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows you to create a new array with the same elements as an existing array. This syntax was not available in earlier versions of JavaScript.

**Benchmark Results:**
The latest benchmark results show that:

* `Array.prototype.slice()` is the slowest method, with approximately 257322224 executions per second on Opera 104.
* The spread operator (`[ ... ]`) is the fastest method, with around 10996750 executions per second.
* `Object.values()` is faster than `slice()`, but slower than the spread operator, with approximately 10695043 executions per second.

**Other Alternatives:**
If you're looking for alternative methods to create a shallow copy of an array in JavaScript, consider using:

* `Array.prototype.map()` followed by `Array.from()`: This method is often considered more efficient and flexible than `slice()`.
* `Array.prototype.concat()` with the spread operator (`[ ... ]`): This method creates a new array containing all elements from multiple arrays.
* `lodash.cloneDeep()` or similar functions from other libraries: These functions provide more flexibility and customization options for creating deep copies of objects.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and compatibility considerations.

Related benchmarks:

Array.prototype.slice vs spread operator vs Object.values (new rev) (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

Object.values

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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