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

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6169227.5 Ops/sec
spread operator	8347683.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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