Benchmark: Array concat vs spread operator vs push - Assign to same variable name

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4295902.5 Ops/sec
spread operator	18238032.0 Ops/sec
Push	15285556.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is tested?**

The provided benchmark measures the performance of three ways to concatenate or assign an array:

1. `Array.prototype.concat()`: This method takes another array as an argument and returns a new array with the elements from both arrays.
2. The spread operator (`...`): This operator allows you to expand an array by spreading its elements into another array.
3. `Array.prototype.push()` (with the spread operator, `...`): This method adds one or more elements to the end of the array and returns the new length.

**Options compared**

The benchmark compares these three options because they are often used interchangeably, but have different performance characteristics.

**Pros and Cons:**

* **Array.prototype.concat()**:
	+ Pros: It's a widely supported method that has been around for a long time.
	+ Cons: It creates a new array, which can be expensive in terms of memory allocation and copying the original array's elements.
* **Spread operator (`...`)**:
	+ Pros: It's a modern, concise way to concatenate arrays without creating a new one.
	+ Cons: It requires JavaScript engines to support it (as of now), and its performance can vary depending on the engine implementation.
* **Array.prototype.push()` (with the spread operator, `...`)**:
	+ Pros: Similar to the spread operator, but it's specifically designed for pushing elements onto an array.
	+ Cons: It still creates a new array, which may be expensive.

**Library and its purpose**

None of the test cases use any specific libraries. However, the benchmark script assumes that `Array.prototype` is available, which is a standard part of the JavaScript language.

**Special JS feature or syntax**

The spread operator (`...`) is a relatively recent addition to the JavaScript language (introduced in ECMAScript 2015). It allows you to expand an array by spreading its elements into another array. This benchmark tests how performance varies between using this operator and `Array.prototype.concat()`.

**Other alternatives**

If you're interested in exploring other options, some alternative methods for concatenating arrays include:

* Using the `Array.join()` method: `new Array(...).join()` can be used to concatenate an array into a string.
* Using `String.fromCharCode()` followed by repeated calls to `new Uint8Array([...])`: This approach involves creating a new array from individual characters or numbers, which is unlikely to be performance-critical.

Keep in mind that these alternatives are not typically used for concatenating arrays because they introduce additional overhead and may not produce the same results. The spread operator and `Array.prototype.concat()` remain among the most common and efficient ways to concatenate arrays.

Related benchmarks:

Array concat vs spread operator vs push - Assign to same variable name (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

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