Benchmark: Array.prototype.concat vs spread operator

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmarking test case created using MeasureThat.net. The benchmark compares the performance of two approaches: the traditional `concat()` method and the new ES6 spread operator, both used to create a copy of an array.

**What is tested**

The benchmark tests how efficient each approach is in creating a shallow copy of an array, specifically when dealing with arrays containing primitive values (like strings and numbers) and a boolean value. The test cases are designed to push the arrays into memory, allowing the browser's garbage collector to kick in, which can affect performance.

**Options compared**

The benchmark compares two options:

1. **`concat()` method**: This is a traditional way of creating a copy of an array by concatenating the original array with an empty array.
```javascript
var params = [ "hello", true, 7 ];
var other = params.concat();
```
2. **Spread operator (`...`)**: This is a new ES6 feature that allows spreading the elements of an array into a new array.
```javascript
var params = [ "hello", true, 7 ];
var other = [...params];
```
**Pros and Cons**

* **`concat()` method**:
	+ Pros:
		- Widely supported in older browsers.
		- Easy to understand for developers familiar with the traditional `push()` method.
	+ Cons:
		- Creates a new array object, which can lead to increased memory allocation and garbage collection overhead.
		- May perform slower due to the additional operations involved (i.e., creating a new array, copying elements).
* **Spread operator (`...`)**:
	+ Pros:
		- More concise and expressive than `concat()`.
		- Can be faster since it creates an iterator that yields each element of the original array without allocating a separate array object.
	+ Cons:
		- May not work as expected in older browsers or environments that don't support ES6 features.

**Library usage**

There is no explicit library used in this benchmark, but some browsers may have built-in optimizations or implementations for `concat()` and spread operator that could affect performance. However, MeasureThat.net abstracts away these variations to focus on the core functionality of each approach.

**Special JS feature or syntax**

The benchmark uses the ES6 spread operator (`...`), which is a relatively new feature introduced in ECMAScript 2015 (ES6). This syntax allows for concise creation of arrays and other iterable objects, making it a popular choice among modern developers. However, as mentioned earlier, its support may be limited in older browsers or environments.

**Other alternatives**

If you were to rewrite this benchmark using alternative approaches, some options could include:

1. Using `Array.prototype.slice()` with the spread operator: `[...params.slice()]`. This approach avoids creating a new array object but still benefits from the performance advantages of spread.
2. Implementing a custom array copy function using `Buffer` or `TypedArray`. These APIs can provide more control over memory allocation and garbage collection, potentially leading to better performance.
3. Using a library like Lodash's `cloneDeep()` or `deepCopy()`, which provides a robust implementation for creating deep copies of arrays and objects.

Keep in mind that the choice of alternative approaches depends on your specific use case, target browser support, and desired level of complexity.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 YaBrowser/17.9.1.768 Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 17 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4251300.0 Ops/sec
spread operator	2759299.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: Array.prototype.concat vs spread operator

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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