Benchmark: Concat / Spread - MeasureThat.net

Tests:

Spread
var params = [ "hello", true, 7 ]; var other = [ ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ];
Concat
var params = [ "hello", true, 7 ]; [].concat(...[ ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ]);

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

User agent: Mozilla/5.0 (Android 10; Mobile; rv:109.0) Gecko/112.0 Firefox/112.0

Browser/OS: Firefox Mobile 112 on Android

View result in a separate tab

Test name	Executions per second
Spread	304473.9 Ops/sec
Concat	221058.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results.

**What is being tested?**

MeasureThat.net is testing two different approaches to concatenate arrays in JavaScript: using the spread operator (`...`) and concatenating arrays with `concat()`.

The test cases are comparing the performance of these two methods on a sample array `params` containing three elements: `"hello"`, `true`, and `7`. The test creates multiple copies of this array, using both the spread operator and `concat()`, to compare their execution times.

**Options compared**

Two options are being compared:

1. **Spread Operator (`...`)**: This method uses the spread operator to create a new array by copying elements from another array.
2. **Concatenation with `concat()`**: This method uses the `concat()` method to concatenate two or more arrays into a single array.

**Pros and Cons**

* **Spread Operator (`...`)**:
	+ Pros: concise, efficient, and modern syntax.
	+ Cons: may not be supported in older browsers or versions of JavaScript.
* **Concatenation with `concat()`**:
	+ Pros: widely supported across browsers and versions of JavaScript.
	+ Cons: more verbose and less concise than the spread operator.

**Library/Library-less approach**

Neither of these approaches relies on a specific library. The test uses only built-in JavaScript features.

**Special JS feature/Syntax**

The spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2015 (ES6). It allows for more concise and expressive array manipulation.

**Other alternatives**

Other methods for concatenating arrays include:

* Using the `push()` method to add elements to an array, followed by creating a new array with the desired length.
* Using a loop or `for...of` loop to iterate over the original array and push elements onto a new array.
* Using the `Array.prototype.reduce()` method to concatenate arrays.

While these alternatives exist, they are generally less efficient and more verbose than using the spread operator or concatenation with `concat()`.

Related benchmarks:

Concat / Spread (version: 0)

Comparing performance of: Spread vs Concat

Created: 2 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 6 months ago):