Benchmark: Array.prototype.concat vs spread operator 2024

Script Preparation code:

arr10 = Array(10).fill('x')
arr100 = Array(100).fill('x')
arr10K = Array(10000).fill('x')

Tests:

Array.prototype.concat 10 items
const result = [ "1" ].concat(arr10);
Spread operator 10 items
const result = [ "1", ...arr10 ]
Array.prototype.concat 100 items
const result = [ "1" ].concat(arr100);
Spread operator 100 items
const result = [ "1", ...arr100 ]
Array.prototype.concat 10K items
const result = [ "1" ].concat(arr10K);
Spread operator 10K items
const result = [ "1", ...arr10K ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat 10 items
Spread operator 10 items
Array.prototype.concat 100 items
Spread operator 100 items
Array.prototype.concat 10K items
Spread operator 10K items

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; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Mac OS X 10.15

View result in a separate tab

Array.prototype.concat 10 items

21.9M/s

Spread operator 10 items

13.4M/s

Array.prototype.concat 100 items

9.2M/s

Spread operator 100 items

1.9M/s

Array.prototype.concat 10K items

158K/s

Spread operator 10K items

21K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat 10 items	21,859,234 Ops/sec
Spread operator 10 items	13,440,895 Ops/sec
Array.prototype.concat 100 items	9,201,733 Ops/sec
Spread operator 100 items	1,944,838 Ops/sec
Array.prototype.concat 10K items	157,737 Ops/sec
Spread operator 10K items	20,592 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test case on MeasureThat.net. The test compares the performance of two approaches to concatenate arrays: the traditional `Array.prototype.concat` method and the spread operator (`...`) syntax.

**Tested Options**

There are four test cases, each comparing one of the two approaches:

1. **Array.prototype.concat 10 items**: Concatenates an array of 10 elements using the traditional `concat` method.
2. **Spread operator 10 items**: Concatenates an array of 10 elements using the spread operator (`...`) syntax.
3. **Array.prototype.concat 100 items**: Concatenates an array of 100 elements using the traditional `concat` method.
4. **Spread operator 100 items**: Concatenates an array of 100 elements using the spread operator (`...`) syntax.
5. **Array.prototype.concat 10K items**: Concatenates an array of 10,000 elements using the traditional `concat` method.
6. **Spread operator 10K items**: Concatenates an array of 10,000 elements using the spread operator (`...`) syntax.

**Pros and Cons**

* **Traditional `concat` method**:
	+ Pros: well-established, widely supported, and easy to understand.
	+ Cons: can be slower than other approaches, especially for large arrays.
* **Spread operator (`...`) syntax**:
	+ Pros: concise, modern, and relatively fast.
	+ Cons: less familiar to some developers, may not work in older browsers.

**Library Used**

There is no library explicitly mentioned in the JSON. However, it's likely that a lightweight JavaScript implementation of the `concat` method is used internally by MeasureThat.net for these tests.

**Special JS Features/Syntax**

The spread operator (`...`) syntax is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows for creating a new array by copying elements from an existing array or other iterable.

**Other Considerations**

When comparing the performance of these two approaches, it's essential to consider factors like:

* Array size: The tests are performed with different array sizes (10, 100, and 10,000).
* Browser and environment variations: The benchmark results are reported for multiple browsers and platforms.
* Optimizations: Some browsers may optimize the `concat` method or spread operator differently.

**Alternatives**

If you're interested in exploring alternative approaches to concatenate arrays, consider:

1. **Array.prototype.push()**: Concatenating an array by pushing elements onto it can be faster than traditional `concat`.
2. **Array.prototype.set()**: A newer approach that allows for more efficient concatenation using `set()` and `fill()`.
3. **String joining**: Concatenating arrays as strings (e.g., by joining elements with a separator) is another alternative.
4. **Native array constructors**: Some browsers support native array constructors like `Int8Array` or `Uint8Array`, which can be used for efficient concatenation.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and target browser environment.

Array.prototype.concat vs spread operator 2024 (version: 0) Benchmark.js

Comparing performance of: `Array.prototype.concat 10 items vs Spread operator 10 items vs Array.prototype.concat 100 items vs Spread operator 100 items vs Array.prototype.concat 10K items vs Spread operator 10K items`

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat 10 items

Spread operator 10 items

Array.prototype.concat 100 items

Spread operator 100 items

Array.prototype.concat 10K items

Spread operator 10K items

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.concat vs spread operator 2024 (version: 0) Benchmark.js

Comparing performance of: Array.prototype.concat 10 items vs Spread operator 10 items vs Array.prototype.concat 100 items vs Spread operator 100 items vs Array.prototype.concat 10K items vs Spread operator 10K items

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat 10 items

Spread operator 10 items

Array.prototype.concat 100 items

Spread operator 100 items

Array.prototype.concat 10K items

Spread operator 10K items

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `Array.prototype.concat 10 items vs Spread operator 10 items vs Array.prototype.concat 100 items vs Spread operator 100 items vs Array.prototype.concat 10K items vs Spread operator 10K items`