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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.1

View result in a separate tab

Test name	Executions per second
Array.prototype.slice	92199568.0 Ops/sec
spread operator	539725952.0 Ops/sec
map	61923552.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested on the provided JSON.

**Benchmark Definition**

The benchmark is comparing three approaches to create a shallow copy of an array:

1. `Array.prototype.slice()`
2. The new ES6 spread operator (`[ ...params ]`)
3. The `map()` method with a callback function (`params.map(i => i)`)

These three approaches are being compared to see which one is the fastest.

**Options Compared**

The benchmark is comparing the performance of these three approaches under the following conditions:

* Creating a shallow copy of an array
* Using a constant size array with 3 elements (as seen in the first test case)
* Execution rate per second

**Pros and Cons of Each Approach**

1. `Array.prototype.slice()`:
	* Pros: widely supported, well-documented, and easy to implement.
	* Cons: can be slow for large arrays, as it creates a new array object with references to the original elements.
2. Spread Operator (`[ ...params ]`):
	* Pros: modern and efficient way to create shallow copies, works well for large arrays.
	* Cons: requires support for ES6 features, which might not be present in older browsers or environments.
3. `map()` method with a callback function:
	* Pros: can be used for more complex transformations than just creating a copy, works well for larger arrays.
	* Cons: creates a new array object and performs additional work (map call), making it potentially slower.

**Libraries and Special JS Features**

None of the provided benchmark definitions require any external libraries or special JavaScript features beyond ES6 support for the spread operator.

**Other Considerations**

When writing microbenchmarks like this, it's essential to consider:

* The size of the input array (in this case, 3 elements)
* The specific use case being tested
* Potential edge cases or corner scenarios that might affect performance

**Alternatives**

If you wanted to add more test cases or explore different aspects of array creation, some potential alternatives could include:

* Comparing `Array.prototype.concat()` vs. the spread operator vs. `map()`
* Testing array creation with larger input sizes
* Adding test cases for more complex transformations using `map()`

Related benchmarks:

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

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.slice

spread operator

map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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