Benchmark: Array concat vs spread operator vs push - with large arrays5

Script Preparation code:

var array1 = [0,1,2,3,4,5,6,7,8,9]; 
for (var i=0;i<10;i++) array1.push(...array1);
var array2 = [...array1];
console.log('array1.length = ' + array1.length)

Tests:

Array.prototype.concat
var result = array1.concat(array2); // the 'push' test needs to do more setup. Repeat it here so it's not unfairly hindered. var pushResult = []; pushResult.push(...array1);
spread operator
var result = [...array1, ...array2]; // the 'push' test needs to do more setup. Repeat it here so it's not unfairly hindered. var pushResult = []; pushResult.push(...array1);
Push
// setup for push var pushResult = []; pushResult.push(...array1); // push test: pushResult.push(...array2);
spread operator without push setup
var result = [...array1, ...array2];
push without setup
var result = array1.push(...array2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
spread operator without push setup
push without setup

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's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of three different methods for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. The `push()` method

**Test Cases**

Each test case measures the execution time of a single method, with two variations:

* With setup: Each test case includes additional code to create an array and then concatenate it with another array using the tested method.
* Without setup: Some test cases do not include the setup code, forcing the browser to repeat the setup process within the benchmark.

**Options Compared**

The three options being compared are:

1. `Array.prototype.concat()`: A traditional method for concatenating arrays.
2. The spread operator (`...`): A new ES6 feature that allows array elements to be concatenated using the `...` syntax.
3. The `push()` method: An older method for adding elements to an array and then concatenating it.

**Pros and Cons of Each Approach**

Here's a brief summary of each approach:

1. `Array.prototype.concat()`: This method is straightforward but can be slower due to the overhead of creating a new array object.
	* Pros: Easy to use, well-supported by browsers.
	* Cons: Can be slow for large arrays.
2. The spread operator (`...`): This method is concise and efficient but may not work in older browsers or with certain types of data.
	* Pros: Fast, flexible, modern syntax.
	* Cons: May not work in older browsers or with certain data types.
3. The `push()` method: This method is simple but can lead to slower performance due to the overhead of creating a new array object and then concatenating it.
	* Pros: Easy to use, well-supported by browsers.
	* Cons: Can be slow for large arrays.

**Library Used**

There is no explicit library mentioned in the benchmark definition or test cases. However, the `Array.prototype.concat()` method uses the Array prototype, which is a built-in JavaScript object.

**Special JS Feature/Syntax**

The spread operator (`...`) is a new ES6 feature that allows array elements to be concatenated using the `...` syntax. This feature was introduced in ECMAScript 2015 (ES6) and has since been widely adopted by modern browsers and JavaScript engines.

**Other Alternatives**

There are other methods for concatenating arrays in JavaScript, such as:

* `Array.prototype.push()` followed by `Array.prototype.concat()`: This method is similar to using the spread operator but can be slower due to the overhead of creating a new array object.
* Using `String.prototype.concat()` or `Array.prototype.join()`: These methods are not suitable for concatenating arrays and should not be used.

In summary, the benchmark compares three different methods for concatenating arrays in JavaScript: `Array.prototype.concat()`, the spread operator (`...`), and the `push()` method. Each approach has its pros and cons, and the choice of method depends on the specific use case and performance requirements.

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

Browser/OS: Chrome 88 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	21627.0 Ops/sec
spread operator	11372.1 Ops/sec
Push	13855.3 Ops/sec
spread operator without push setup	16692.9 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push - with large arrays5 (version: 8)

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

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

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push

spread operator without push setup

push without setup

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