Benchmark: Array concat vs spread operator vs push vs new array spread

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Push
New array spread

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Description**

The benchmark is called "Array concat vs spread operator vs push vs new array spread". It compares four different ways to concatenate two arrays in JavaScript: `concat()`, spread operator (`...`), `push()` with rest parameter, and creating a new array using the spread operator.

**Test Cases**

There are three test cases:

1. **Array.prototype.concat**: This test uses the traditional `concat()` method to merge two arrays.
	* Code snippet: `other = other.concat(params);`
	* Library/Language feature: None
	* Description: Simply concatenates two arrays using the `concat()` method.
2. **Push**: This test uses the `push()` method with rest parameter to add elements from one array to another.
	* Code snippet: `other = other.push(...params);`
	* Library/Language feature: None
	* Description: Uses the `push()` method with rest parameter to add elements from one array to another.
3. **New array spread**: This test uses the spread operator (`...`) to create a new array by spreading the contents of two arrays.
	* Code snippet: `var other = [ ...other, ...params ];`
	* Library/Language feature: Spread operator (`...`)
	* Description: Creates a new array by spreading the contents of two arrays using the spread operator.

**Benchmark Results**

The latest benchmark results show the execution speed (Executions Per Second) for each test case on Chrome 89:

1. **Push**: 30,568,930 executions per second
2. **New array spread**: 26,185,424 executions per second
3. **Array.prototype.concat**: 7,132,648 executions per second

**Pros and Cons**

* `concat()` method:
	+ Pros: Easy to understand, widely supported.
	+ Cons: Slow compared to other methods.
* Spread operator (`...`):
	+ Pros: Fastest method in this benchmark, creates a new array without modifying the original arrays.
	+ Cons: May cause performance issues if used excessively due to its overhead of creating a new array.
* `push()` with rest parameter:
	+ Pros: Simple, easy to use. Modifies the original array.
	+ Cons: Slow compared to spread operator.

**Other Considerations**

* If you need to concatenate arrays frequently, consider using the spread operator (`...`) for performance benefits.
* If you're working with large arrays and performance is critical, avoid using `concat()` or `push()` methods.
* The spread operator can also be used with objects, not just arrays.

**Alternatives**

If you don't want to use the spread operator or any of the above methods, you could consider:

1. Using `Array.prototype.set()` (ES2022) to update an array in place.
2. Implementing a custom concatenation function for performance-critical scenarios.
3. Avoiding complex operations on arrays and using other data structures instead (e.g., linked lists).

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

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7132648.0 Ops/sec
Push	30568930.0 Ops/sec
New array spread	26185424.0 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push vs new array spread (version: 0)

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

Comparing performance of: Array.prototype.concat vs Push vs New array spread

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Push

New array spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):