Benchmark: Array.prototype.concat vs spread operator

Script Preparation code:

var myArray = [ "hello", true, 7 ]

Tests:

slice
var other = myArray.slice();
spread operator
var other = [ ...myArray ]
concat into empty array
[].concat(myArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
spread operator
concat into empty array

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
slice	15967863.0 Ops/sec
spread operator	15219452.0 Ops/sec
concat into empty array	14990695.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares three different approaches for creating a shallow copy of an array:

1. **`Array.prototype.concat()`**: This is the traditional method for concatenating arrays in JavaScript.
2. **Spread Operator (`...`)**: This is a new feature introduced in ECMAScript 2015 (ES6) that allows creating a new array from an existing array by spreading its elements.
3. **`myArray.slice()`**: This method creates a shallow copy of the original array.

**Options Comparison**

The benchmark tests the performance of each approach:

* **`concat into empty array`**: Creates a new empty array and concatenates the original array to it.
* **`slice`**: Creates a new array by copying the elements from the original array, starting from the first element (index 0) and ending at the last element (index length -1).
* **`spread operator`**: Creates a new array by spreading the elements of the original array.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`Array.prototype.concat()`**:
	+ Pros: Simple to use, widely supported.
	+ Cons: Can be slow for large arrays due to the overhead of creating a new empty array.
* **Spread Operator (`...`)**:
	+ Pros: Fast, efficient, and concise.
	+ Cons: Introduced in ES6, may not support older browsers or environments.
* **`myArray.slice()`**:
	+ Pros: Fast, efficient, and widely supported.
	+ Cons: May require more memory to store the new array.

**Library**

None of the provided benchmarks uses any external libraries. The `slice()` method is a built-in JavaScript method that creates a shallow copy of an array.

**Special JS Feature or Syntax**

The benchmark uses the **spread operator (`...`)**, which was introduced in ECMAScript 2015 (ES6). This feature allows creating a new array from an existing array by spreading its elements. Note that this benchmark assumes that the target environment supports ES6 syntax.

**Other Alternatives**

If you need to create a shallow copy of an array without using the `slice()` method or spread operator, you can also use:

* **`Array.prototype.slice.call()`**: Creates a new array by copying the elements from the original array.
* **`Array.from()`**: Creates a new array from an iterable (such as an array) by spreading its elements.

These alternatives may have different performance characteristics and are not always faster or slower than `slice()` or the spread operator.

Related benchmarks:

Array.prototype.concat vs spread operator (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: slice vs spread operator vs concat into empty array

Created: 6 years ago by: Guest

Jump to the latest result

slice

spread operator

concat into empty array

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):