Benchmark: JS slice vs spread operator vs FromArray

Tests:

Array.prototype.slice
const params = [ "hello", true, 7, { first: "first", second: "second" } ] const other = params.slice()
spread operator
const params = [ "hello", true, 7, { first: "first", second: "second" } ] const other = [ ...params ]
FromArray method
var FromArray = function (array) { var temp = [] for (var i = 0; i < array.length; ++i) { temp.push(array[i]) } return temp } const params = [ "hello", true, 7, { first: "first", second: "second" } ] const other = FromArray(params)

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Array.prototype.slice

74.5M/s

spread operator

64.0M/s

FromArray method

58.4M/s

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

View exact numbers

✓ Array.prototype.slice: 74,529,568 ops/sec
• spread operator: 63,976,032 ops/sec
• FromArray method: 58,415,792 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
FromArray method

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 150 on Windows

View result in a separate tab

Array.prototype.slice

62.7M/s

spread operator

57.6M/s

FromArray method

54.2M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.slice	62,679,904 Ops/sec
spread operator	57,643,320 Ops/sec
FromArray method	54,215,664 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 benchmark and its test cases.

**Benchmark Overview**

The benchmark compares three approaches to create an array from an existing array:

1. `Array.prototype.slice()`: This is a method on the Array prototype that returns a shallow copy of the original array.
2. The spread operator (`...`): This is a syntax used in JavaScript to expand an array into individual elements, creating a new array with those elements.
3. A custom `FromArray` function: This is a user-defined function that creates a new array by iterating over the existing array and pushing each element into a temporary array.

**Options Compared**

The benchmark compares the execution time of these three approaches on the same input data:

* `params`: An array with four elements: a string, a boolean, an integer, and an object.
* `other`: The result of applying each approach to `params`.

**Pros and Cons of Each Approach**

1. **Array.prototype.slice()**:
	* Pros: Fast and efficient, as it uses native JavaScript methods.
	* Cons: Creates a shallow copy of the original array, which may be unnecessary if the original array is already in the desired state.
2. **Spread Operator (`...`)**:
	* Pros: Creates a new array with the same elements as the original array, without modifying the original array.
	* Cons: May have performance implications due to the overhead of creating a new array and iterating over the elements.
3. **FromArray method**:
	* Pros: Allows for customization and control over the creation process.
	* Cons: May be slower than native methods like `slice()` or the spread operator, as it involves explicit iteration and array manipulation.

**Library Used (None)**

There are no external libraries used in this benchmark.

**Special JS Feature/ Syntax**

The benchmark uses the spread operator (`...`) to create a new array. This is a relatively recent feature introduced in ES6 (ECMAScript 2015).

**Benchmark Result**

The latest benchmark results show that:

* `Array.prototype.slice()` is the fastest, with an average execution time of around 4.53 million executions per second.
* The spread operator (`...`) is slower, with an average execution time of around 3.53 million executions per second.
* The `FromArray` method is the slowest, with an average execution time of around 1.53 million executions per second.

**Alternatives**

Other alternatives to these approaches might include:

* Using a library like Lodash, which provides a `cloneDeep()` function for creating deep copies of arrays.
* Using a custom implementation that leverages native WebAssembly (WASM) or other performance-enhancing technologies.
* Optimizing the code for specific use cases or hardware architectures.

These alternatives would depend on the specific requirements and constraints of the project.

JS slice vs spread operator vs FromArray (version: 0) Benchmark.js

Compare ES6 spread operator with slice() and FromArray()

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

Created: 5 years ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

FromArray method

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JS slice vs spread operator vs FromArray (version: 0) Benchmark.js

Compare ES6 spread operator with slice() and FromArray()

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

Created: 5 years ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

FromArray method

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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 vs FromArray method`