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)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Array.prototype.slice

105.5M/s

spread operator

78.4M/s

map

72.5M/s

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

View exact numbers

✓ Array.prototype.slice: 105,520,792 ops/sec
• spread operator: 78,446,784 ops/sec
• map: 72,483,688 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
map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 8.1

View result in a separate tab

Array.prototype.slice

5.6M/s

map

5.2M/s

spread operator

4.0M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.slice	5,589,897 Ops/sec
map	5,190,335 Ops/sec
spread operator	4,028,581 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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()`

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

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: 4 years ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

map

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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: 4 years ago by: Guest

Go to the latest result

Array.prototype.slice

spread operator

map

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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 map`