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: 3 months 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

Test name	Executions per second
Array.prototype.concat 10 items	21859234.0 Ops/sec
Spread operator 10 items	13440895.0 Ops/sec
Array.prototype.concat 100 items	9201733.0 Ops/sec
Spread operator 100 items	1944837.8 Ops/sec
Array.prototype.concat 10K items	157737.3 Ops/sec
Spread operator 10K items	20592.3 Ops/sec

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

Related benchmarks:

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

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: one year ago by: Guest

Jump 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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