Benchmark: spread vs concat for cloning array benchmark

Script Preparation code:

var myArray = new Array(1000).fill(0);

var myCopy = null;

Tests:

spread
myCopy = [...myArray];
concat
myCopy = [].concat(myArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
spread	783064.7 Ops/sec
concat	2124157.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark that compares two approaches to clone an array: using the spread operator (`...`) and concatenation with the `concat()` method.

**What is being tested?**

In this benchmark, we're measuring the execution time of two different methods to create a copy of an array:

1. **Spread Operator (`...`)**: This approach creates a new array by iterating over the original array's elements using the spread operator (`...`) and includes them in the new array.
2. **Concatenation with `concat()` method**: This approach uses the `concat()` method to concatenate the original array with an empty array, effectively creating a copy of the original array.

**Options being compared**

The benchmark is comparing these two approaches:

* **Spread Operator (`...`)**
	+ Pros: Creates a shallow copy of the array, efficient for large arrays.
	+ Cons: Can be slower than concatenation in some cases due to the overhead of creating an intermediate array.
* **Concatenation with `concat()` method**

**Pros and Cons**

* **Spread Operator (`...`)**
	+ Pros:
		- Creates a shallow copy of the array, which is suitable for most use cases.
		- Efficient for large arrays since it avoids creating an intermediate array.
	+ Cons:
		- Can be slower than concatenation in some cases due to the overhead of creating an intermediate array.
* **Concatenation with `concat()` method**
	+ Pros: Fast and efficient, especially for small to medium-sized arrays.
	+ Cons:
		- Creates a shallow copy of the array, which can lead to unexpected behavior when modifying the copied array.

**Library/Dependency**

None, this benchmark uses only built-in JavaScript features (arrays, spread operator, concatenation method).

**Special JS feature/Syntax**

The spread operator (`...`) is a relatively recent addition to JavaScript, introduced in ECMAScript 2018. It allows creating new arrays by iterating over existing arrays or other iterable objects.

**Benchmark Preparation Code**

```javascript
var myArray = new Array(1000).fill(0);
var myCopy = null;
```

This code creates an array `myArray` with 1000 elements, all initialized to 0. The variable `myCopy` is initially set to `null`.

**Individual Test Cases**

The benchmark consists of two test cases:

1. **Spread Operator (```)**: Creates a new array by iterating over the elements of `myArray` using the spread operator (`...`) and assigns it to `myCopy`.
2. **Concatenation with `concat()` method**: Uses the `concat()` method to concatenate an empty array with `myArray`, effectively creating a copy of `myArray`, and assigns the result to `myCopy`.

**Latest Benchmark Result**

The benchmark results show the execution time for each test case:

1. **Spread Operator (```)**: 783064.6875 executions per second
2. **Concatenation with `concat()` method**: 2124157.5 executions per second

As expected, the spread operator is slower than concatenation due to the overhead of creating an intermediate array.

**Other Alternatives**

If you need to clone arrays frequently in your JavaScript code, you may also consider using other libraries or modules that provide efficient array cloning mechanisms, such as:

* `lodash.clone()` (from the Lodash library)
* `Array.prototype.slice()`
* `Array.prototype.copyWithin()`

Keep in mind that these alternatives might introduce additional dependencies or overhead, so it's essential to evaluate their suitability for your specific use case.

Related benchmarks:

spread vs concat for cloning array benchmark (version: 0)

Comparing performance of: spread vs concat

Created: 2 years ago by: Guest

Jump to the latest result

spread

concat

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