Benchmark: Array.prototype.concat vs spread operator

Script Preparation code:

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

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice without any argument
spread operator
concat into empty array
slice(0)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**What is being tested?**

The test case is comparing three different approaches to create a new copy of an array:

1. `slice()`: A traditional method that returns a shallow copy of a portion of an array.
2. Spread operator (`...`): The new ES6 spread operator, which creates a new array by spreading the elements of the original array.
3. `concat()`: Another traditional method that combines two or more arrays into one.

**Options being compared**

The options being compared are:

* `slice()` with and without an argument ( slicing from index 0 to the end)
* Spread operator (`...`)
* `concat()` into an empty array

**Pros and Cons of each approach:**

1. **Slice()**:
	* Pros:
		+ Fast (O(1)) because it only needs to access the start index.
		+ Can be used with or without an argument.
	* Cons:
		+ Returns a shallow copy, which can lead to unexpected behavior if the original array contains mutable objects.
2. **Spread operator (`...`)**:
	* Pros:
		+ Creates a new array with all the elements from the original array (deep copy).
		+ Very fast (O(1)) because it only needs to iterate over the elements of the original array.
		+ Modern and widely supported.
	* Cons:
		+ Requires JavaScript 7.0 or later, which may not be supported by all browsers.
3. **Concat()**:
	* Pros:
		+ Can handle arrays with different lengths.
	* Cons:
		+ Slower (O(n)) than slice() and spread operator because it needs to iterate over the elements of both arrays.
		+ Returns a shallow copy if only one array is provided.

**Library or special JS feature:**

The test case uses the `slice()` method, which is a native JavaScript function. It also uses the new ES6 spread operator (`...`), which was introduced in ECMAScript 2015 (ES6).

**Other considerations:**

* The benchmark measures the execution speed of each approach, assuming that the original array has a large number of elements.
* The test case is designed to compare the performance of these methods on a specific use case: creating a new copy of an array.

**Alternatives:**

If you're interested in exploring alternative approaches for creating copies of arrays, here are some options:

* `Array.prototype.map()`: Creates a new array by applying a mapping function to each element of the original array. This approach can be slower than slice(), spread operator, and concat().
* `Array.prototype.reduce()`: Similar to map(), but applies a reduction function to each element of the original array.
* `lodash.clone()` or other utility libraries that provide deep copy functionality.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the methods being tested in this benchmark.

Latest run results:

Run details: (Test run date: 6 years ago)

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

Browser/OS: Chrome 69 on Windows

View result in a separate tab

Test name	Executions per second
slice without any argument	5204005.5 Ops/sec
spread operator	3983811.8 Ops/sec
concat into empty array	2072068.9 Ops/sec
slice(0)	4293930.0 Ops/sec

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 without any argument vs spread operator vs concat into empty array vs slice(0)

Created: 6 years ago by: Guest

Jump to the latest result

slice without any argument

spread operator

concat into empty array

slice(0)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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