Benchmark: array concat vs spread create new array

Tests:

spread
var a = [1,2,3]; var b = [4,5,6]; var c = [...a, ...b]
concat
var a = [1,2,3]; var b = [4,5,6]; var c = a.concat(b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:83.0) Gecko/20100101 Firefox/83.0

Browser/OS: Firefox 83 on Ubuntu

View result in a separate tab

Test name	Executions per second
spread	862494.4 Ops/sec
concat	1337704.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is testing the performance difference between two approaches: concatenating arrays using the `concat()` method and spreading an array using the spread operator (`...`).

**Options Compared**

There are two options compared:

1. **Concatenation**: This approach uses the `concat()` method to concatenate two arrays, `[a]` and `[b]`. The resulting array is stored in variable `c`.
2. **Spreading**: This approach uses the spread operator (`...`) to create a new array by spreading the elements of both input arrays, `[a]` and `[b]`. The resulting array is also stored in variable `c`.

**Pros and Cons**

* **Concatenation**:
	+ Pros: Simple and easy to understand. It's been around for a long time and has good browser support.
	+ Cons: Can be slower than spreading, especially when dealing with large arrays.
* **Spreading**:
	+ Pros: Generally faster than concatenation, as it avoids creating an intermediate array.
	+ Cons: Requires modern JavaScript features (ECMAScript 2015+) and may not work in older browsers.

**Library Used**

There is no library used in this benchmark. The tests only use built-in JavaScript features.

**Special JS Feature/ Syntax**

There are no special JavaScript features or syntax used beyond what's required for the two options being compared.

**Other Alternatives**

If the spread operator were not available, an alternative could be using `Array.prototype.push()` to concatenate arrays:

`var c = []; c.push.apply(c, a); c.push.apply(c, b);`

Another option would be using `Array.prototype.reduce()` or `Array.prototype.forEach()` to achieve similar results.

It's worth noting that in modern JavaScript, the spread operator is often preferred over concatenation because of its efficiency and simplicity.

**Benchmark Preparation Code**

The provided benchmark preparation code is empty. Typically, this code would include any necessary setup or initialization to prepare the test environment.

**Latest Benchmark Result**

The latest benchmark result shows the performance characteristics of both options for a specific browser (Firefox 83) on a desktop device running Ubuntu. The results indicate that spreading is generally faster than concatenation, which aligns with expectations based on the pros and cons discussed earlier.

Related benchmarks:

array concat vs spread create new array (version: 0)

Comparing performance of: spread vs concat

Created: 4 years ago by: Guest

Jump to the latest result

spread

concat

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