Benchmark: Array concat vs spread operator vs push with random array 10000

Script Preparation code:

var arr = [ 1, 2 ];

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = arr.concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [...arr, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = arr.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

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark is designed to compare the performance of three approaches for concatenating an array:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `push()` with spreading syntax (`...`)

The benchmark is testing these approaches on a random array of 10,000 elements.

**Options being compared**

Here are the options being compared:

* `Array.prototype.concat()`: This method creates a new array by concatenating two or more arrays.
* The ES6 spread operator (`...`): This operator creates a new array by copying the elements from an iterable (such as an array) and spreading them into a new array.
* `push()` with spreading syntax (`...`): This approach uses the `push()` method to add elements to an array, but instead of using the `push()` method directly, it uses the spread operator to spread the elements into the array.

**Pros and Cons**

Here are some pros and cons for each approach:

* `Array.prototype.concat()`:
	+ Pros: Generally more predictable and efficient than the spread operator and `push()` with spreading syntax.
	+ Cons: Can be slower and use more memory than the other two approaches, especially for large arrays.
* The ES6 spread operator (`...`):
	+ Pros: Generally faster and more memory-efficient than `concat()` and `push()` with spreading syntax. Also allows for more concise code.
	+ Cons: May not work as expected in older browsers or environments that don't support the new syntax.
* `push()` with spreading syntax (`...`):
	+ Pros: Often faster and more efficient than `concat()`, especially when concatenating small arrays.
	+ Cons: Can be less predictable than `concat()`, especially when dealing with large arrays.

**Library**

There is no library being used in this benchmark. However, the `Array.prototype.concat()` method is a built-in JavaScript method that uses the ECMAScript standard to perform its operations.

**Special JS feature or syntax**

The ES6 spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows for more concise and expressive code, but may not be supported in older browsers or environments.

**Benchmark preparation code**

The script preparation code `var arr = [ 1, 2 ];` creates an array with two elements. The `push()` with spreading syntax approach would add four elements to the array (two from `arr` and two from `params`), resulting in a new array `[ 1, 2, 3, 4 ]`.

**Individual test cases**

Each individual test case is designed to measure the performance of one specific approach:

* The first test case measures the performance of `Array.prototype.concat()`.
* The second test case measures the performance of the ES6 spread operator (`...`).
* The third test case measures the performance of `push()` with spreading syntax (`...`).

**Other alternatives**

If you were to use alternative approaches for concatenating arrays, some options might include:

* Using the `join()` method: This method concatenates an array of values into a single string.
* Using the `reduce()` method: This method applies a reduction function to each element in an array and returns the result as a new array.
* Using a library like Lodash or Ramda, which provide various functions for working with arrays.

However, these approaches may have different performance characteristics than the ones being tested in this benchmark.

Latest run results:

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

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

Browser/OS: Chrome 76 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	1531557.1 Ops/sec
spread operator	6418018.5 Ops/sec
Push	4157993.2 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push with random array 10000 (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: 5 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 one month ago):