Benchmark: Array.prototype.concat vs spread operator vs contact empty array

Tests:

Array.prototype.concat
var arr1 = [ "hello", true, 7 ]; var arr2 = [ "bye", false, 5 ]; var other = arr1.concat(arr2);
spread operator
var arr1 = [ "hello", true, 7 ]; var arr2 = [ "bye", false, 5 ]; var other = [ ...arr1, ...arr2 ]
Concat empty array
var arr1 = [ "hello", true, 7 ]; var arr2 = [ "bye", false, 5 ]; var other = [].concat(arr1, arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Concat empty array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	16157648.0 Ops/sec
spread operator	39711180.0 Ops/sec
Concat empty array	13935838.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared options, pros and cons of each approach, library usage, special JavaScript features or syntax, and other considerations.

**Benchmark Definition:**
The benchmark compares the performance of three ways to concatenate two arrays in JavaScript:

1. `Array.prototype.concat()`
2. The ES6 spread operator (`...`)
3. Concatenating an empty array with the two input arrays using multiple method calls (`[].concat(arr1, arr2)`)

**Options Compared:**

* **`Array.prototype.concat()`**: This is a traditional way of concatenating two arrays in JavaScript. It creates a new array and copies elements from both input arrays to it.
* **The ES6 spread operator (`...`)**: This is a new syntax introduced in ECMAScript 2015 (ES6) that allows you to expand an array into individual elements or another array. In this benchmark, it's used to concatenate two arrays by spreading the elements of one array onto the other.
* **Concatenating an empty array with multiple method calls (`[].concat(arr1, arr2)`)**: This is a slightly modified version of the traditional `concat()` method. Instead of creating a new array from scratch, it uses the existing empty array and appends the first input array to it using `concat()`, then appends the second input array to the resulting array.

**Pros and Cons of Each Approach:**

* **`Array.prototype.concat()`**: Pros:
	+ Well-established and widely supported.
	+ Can be used in older browsers that don't support the spread operator.
	+ Easy to understand for those familiar with traditional JavaScript.
* Cons:
	+ Creates a new array, which can be memory-intensive if dealing with large inputs.
	+ May have performance implications due to the overhead of creating and copying arrays.
* **The ES6 spread operator (`...`)**: Pros:
	+ More concise and readable than traditional concatenation methods.
	+ Can be more efficient since it avoids creating a new array from scratch.
	+ Supports modern browsers and ECMAScript 2015+ implementations.
* Cons:
	+ May require additional time to learn and understand the syntax.
	+ Not all older browsers or environments support this syntax.
* **Concatenating an empty array with multiple method calls (`[].concat(arr1, arr2)`)**: This approach is a hybrid between traditional `concat()` and the spread operator. It's not widely used but can be seen as a compromise between memory efficiency and readability.

**Library Usage:**
None of these approaches rely on external libraries.

**Special JavaScript Features or Syntax:**
The benchmark uses the ES6 spread operator (`...`), which was introduced in ECMAScript 2015 (ES6). This syntax allows for more concise and expressive array manipulation. The benchmark also uses modern browser-specific features, such as `DevicePlatform` and `OperatingSystem`, to identify the test environment.

**Other Considerations:**

* **Performance implications:** Creating a new array using `concat()` can be slower than using the spread operator or concatenating an empty array with multiple method calls.
* **Memory usage:** Using `concat()` can lead to higher memory usage, especially when dealing with large input arrays.
* **Browser compatibility:** The benchmark assumes that all tested browsers support the ES6 spread operator. If you need to support older browsers, you may want to use traditional concatenation methods.

**Alternatives:**
Other alternatives for array concatenation include:

* Using `Array.prototype.push()` and assigning the result to a variable (e.g., `var arr1 = [ ... ]; arr1.push(...arr2);`)
* Using `Array.prototype.splice()` and merging two arrays using indexing (e.g., `var arr1 = [ ... ]; var arr2 = [ ... ]; arr1.splice(arr1.length, 0, ...arr2);`)

Related benchmarks:

Array.prototype.concat vs spread operator vs contact empty array (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Concat empty array

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Concat empty array

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