Benchmark: Array concat vs spread operator vs push with two arrays, first one is big

Tests:

Array.prototype.concat
var arr1 = Array.from(Array(9999).keys()) var arr2 = Array.from(Array(20).keys()) var other = arr1.concat(arr2);
spread operator twice
var arr1 = Array.from(Array(9999).keys()) var arr2 = Array.from(Array(20).keys()) var other = [ ...arr1, ...arr2 ];
Push
var arr1 = Array.from(Array(9999).keys()) var arr2 = Array.from(Array(20).keys()) var other = arr1.push(...arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator twice
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's being tested.

**Benchmark Overview**

The benchmark compares three different approaches to concatenate two arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`[ ... ]`)
3. The `push()` method with the spread operator (`arr.push(...array)`)

**Options Compared**

These three options are compared because they differ in their implementation, performance, and potential use cases.

* **`Array.prototype.concat()`**: This method creates a new array by copying elements from both input arrays. It's a traditional approach that has been around for a long time.
* **The ES6 spread operator (`[ ... ]`)**: This syntax was introduced in ECMAScript 2015 and allows you to create a new array by spreading the elements of an existing array. It's a concise way to concatenate arrays without creating intermediate arrays.
* **`push()` method with the spread operator (`arr.push(...array)`)**: This approach uses the `push()` method to add elements from another array to the end of the current array. While it achieves the same result as `concat()`, it modifies the original array instead of creating a new one.

**Pros and Cons**

Here's a brief summary of each option:

* **`Array.prototype.concat()`**:
	+ Pros: Established, widely supported, and easy to understand.
	+ Cons: Creates a new array, which can be memory-intensive for large inputs.
* **ES6 spread operator (`[ ... ]`)**:
	+ Pros: Concise, efficient, and creates a new array without modifying the original input.
	+ Cons: May not be immediately familiar to older developers or those who don't know about it.
* **`push()` method with the spread operator (`arr.push(...array)`)**:
	+ Pros: Convenient for small arrays, but modifies the original array and may be slower than `concat()`.
	+ Cons: Modifies the original array, which can be unexpected behavior.

**Library/Functionality Used**

None of these options rely on any external libraries or built-in functions beyond JavaScript's standard library. However, if we consider the spread operator (`[ ... ]`), it's a syntax feature introduced in ECMAScript 2015 and is not enabled by default in older browsers.

**Special JS Feature/Syntax**

The benchmark uses the ES6 spread operator (`[ ... ]`) syntax, which was introduced in ECMAScript 2015. This syntax allows you to create a new array by spreading elements from an existing array into a new array. While it's not enabled by default in older browsers, it's widely supported and has become a common pattern in modern JavaScript development.

**Alternatives**

If the spread operator isn't available or not preferred, other alternatives include:

* Using `Array.prototype.concat()`
* Creating a new array using the `Array.from()` method
* Using a third-party library that provides a more efficient concatenation function

Keep in mind that these alternatives may have different performance characteristics and might require additional setup or dependencies.

Latest run results:

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

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5545.5 Ops/sec
spread operator twice	2843.6 Ops/sec
Push	3715.5 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push with two arrays, first one is big (version: 0)

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

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

Created: 7 months ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator twice

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