Benchmark: concat vs [...spread]

Tests:

concat 100
const a = Array.from(new Array(100)) const b = Array.from(new Array(100)) const c = a.concat(b)
spread 100
const a = Array.from(new Array(100)) const b = Array.from(new Array(100)) const c = [...a, ...b]
concat 1000
const a = Array.from(new Array(1000)) const b = Array.from(new Array(1000)) const c = a.concat(b)
spread 1000
const a = Array.from(new Array(1000)) const b = Array.from(new Array(1000)) const c = [...a, ...b]
concat 10000
const a = Array.from(new Array(10000)) const b = Array.from(new Array(10000)) const c = a.concat(b)
spread 10000
const a = Array.from(new Array(10000)) const b = Array.from(new Array(10000)) const c = [...a, ...b]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat 100
spread 100
concat 1000
spread 1000
concat 10000
spread 10000

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided benchmark measures the performance difference between two ways of concatenating arrays in JavaScript:

1. `concat()`: The traditional way of concatenating arrays using the `concat()` method.
2. `[...spread]` (also known as spread syntax or rest parameter): A new way of concatenating arrays introduced in ECMAScript 2015, which allows you to spread an array into individual elements.

**Options compared**

The benchmark compares two options:

* Traditional `concat()`: This is the older way of concatenating arrays, where the `+` operator or the `concat()` method is used to join two arrays.
* Spread syntax (`[...spread]`): This is a more modern and concise way of concatenating arrays, introduced in ECMAScript 2015. It uses the spread operator (`...`) to expand an array into individual elements.

**Pros and cons of each approach**

**Traditional `concat()`**:

Pros:

* Wide compatibility across older browsers and versions.
* Easy to read and understand for developers familiar with the method.

Cons:

* Can be slower than the modern spread syntax due to the overhead of creating a new array.
* May not be as concise or readable for complex concatenations.

**Spread syntax (`[...spread]`)**:

Pros:

* Faster execution speed compared to traditional `concat()`.
* More concise and expressive, making it easier to read and write code.
* Compatible with modern browsers and ECMAScript versions.

Cons:

* May not be supported in older browsers or versions (e.g., Internet Explorer 11).
* Requires some developers to learn the new syntax.

**Other considerations**

When using spread syntax, it's essential to note that the order of elements matters. The spread operator preserves the original array's index and key ordering, which can lead to unexpected behavior if not used carefully.

In general, the spread syntax is a good choice when concatenating arrays with known sizes or when you want to avoid creating intermediate arrays. However, for cases where size doesn't matter (e.g., when working with variable-length arrays), traditional `concat()` might still be preferred due to its simplicity and readability.

**Library usage**

There are no libraries used in this benchmark.

**Special JavaScript features or syntax**

The spread syntax (`[...spread]`) is a relatively new feature introduced in ECMAScript 2015. It's called "rest parameter" or "spread operator," depending on the context. This syntax allows you to expand an array into individual elements using the `...` symbol.

For example:
```javascript
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // equivalent to newArr = arr.concat([4, 5])
```
This syntax is widely supported in modern browsers and ECMAScript versions.

Latest run results:

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

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

Browser/OS: Chrome 68 on Linux

View result in a separate tab

Test name	Executions per second
concat 100	40475.8 Ops/sec
spread 100	38159.7 Ops/sec
concat 1000	3811.8 Ops/sec
spread 1000	3493.7 Ops/sec
concat 10000	451.2 Ops/sec
spread 10000	416.4 Ops/sec

Related benchmarks:

concat vs [...spread] (version: 0)

Comparing performance of: concat 100 vs spread 100 vs concat 1000 vs spread 1000 vs concat 10000 vs spread 10000

Created: 6 years ago by: Guest

Jump to the latest result

concat 100

spread 100

concat 1000

spread 1000

concat 10000

spread 10000

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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