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)

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: one month ago)

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	69702952.0 Ops/sec
spread operator	56137544.0 Ops/sec
FromArray method	58512856.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 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.

Related benchmarks:

JS slice vs spread operator vs FromArray (version: 0)

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

Jump to the latest result

Array.prototype.slice

spread operator

FromArray method

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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