Benchmark: Array.prototype.concat vs spread operator on small array

Script Preparation code:

var array = new Array(10).fill(1)
var toConcat = new Array(10).fill(2)

Tests:

Array.prototype.concat
var other = array.concat(toConcat);
spread operator
var other = [ ...array, ...toConcat ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 2 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its results.

**Benchmark Definition**

The benchmark is designed to compare two approaches for concatenating arrays in JavaScript:

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

The benchmark tests these two approaches on an array of length 10, filled with 1s (`var array = new Array(10).fill(1)`), and another array of the same length filled with 2s (`var toConcat = new Array(10).fill(2)`).

**Options Compared**

Two options are compared:

* `Array.prototype.concat()`: This method takes an existing array as an argument and returns a new array that contains all elements from both arrays.
* Spread operator (`...`): This syntax allows you to create a new array by spreading the elements of another array into it.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* `Array.prototype.concat()`: Pros:
	+ Well-supported across older browsers
	+ Can be more readable when used with explicit looping
Cons:
	+ Can be slower due to the overhead of creating a new array and copying elements
* Spread operator (`...`): Pros:
	+ More concise and expressive than `concat()`
	+ Can lead to better performance in modern browsers that optimize it well
Cons:
	+ May not work as expected in older browsers or environments without support

**Library/External Functionality**

There is no external library or function used in this benchmark.

**Special JavaScript Feature/Syntax**

The spread operator (`...`) is a relatively recent addition to the JavaScript language, introduced in ECMAScript 2015 (ES6). It's designed to simplify the process of creating new arrays by spreading elements from an existing array.

**Other Alternatives**

If you're interested in exploring alternative approaches for concatenating arrays, here are some other options:

* `Array.prototype.push()`: Instead of using `concat()` or spread operator, you could use `push()` to add elements to the end of the array. However, this approach would require modifying the original array and might not be as efficient.
* `for...of` loop: You could also use a `for...of` loop to iterate over the elements of one array and push them into another.

Keep in mind that these alternatives may have different performance characteristics or requirements compared to `concat()` and spread operator.

Latest run results:

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

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

Browser/OS: Opera 104 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8725595.0 Ops/sec
spread operator	3515281.0 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator on small array (version: 0)

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

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

Created: 11 months ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 2 days ago):