Benchmark: spread vs concat vs unshift vs flat

Tests:

spread
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = [...a, ...b, ...c];
concat
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.concat(...b, ...c);
concat2
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.concat(b).concat(c);
unshift
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.unshift(...b, ...c);
unshift2
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = a.unshift(b).unshift(c);
flat
const a = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const b = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const c = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]; const result = [a,b,c].flat();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat
concat2
unshift
unshift2
flat

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the Benchmark Definition JSON and explain what is tested, compared, pros and cons of different approaches, and other considerations.

**Benchmark Test Cases:**

The test cases compare four ways to concatenate or merge arrays in JavaScript:

1. **Spread Operator (`...`)**: `const result = [...a, ...b, ...c];`
2. **Concatenation with Multiple Calls (`concat()`)**: `const result = a.concat(...b, ...c);`
3. **Concatenation with Nested Calls (`concat()`, `concat()` again)**: `const result = a.concat(b).concat(c);`
4. **Unshift Operator (`unshift()`)**: `const result = a.unshift(...b, ...c);`

**Libraries Used:**

None of the test cases use any external libraries.

**Special JavaScript Features/Syntax:**

* The spread operator (`...`) is used to expand an array into individual elements.
* The concatenation operator (`+` or `+=`) is used to concatenate arrays. However, this is not explicitly shown in the code snippets, but rather implied by the use of multiple calls to `concat()`.
* Unshift Operator (`unshift()`) modifies the original array and adds a new element at the beginning.

**Comparison:**

Each test case measures the performance of a different method for concatenating or merging arrays. The results show that:

* Spread operator (`...`) is generally the fastest, especially for large arrays.
* Concatenation with multiple calls (`concat()`) is slower than using the spread operator but faster than concatenation with nested calls.
* Unshift Operator (`unshift()`) is significantly slower than all other methods.

**Pros and Cons:**

Here are some pros and cons of each method:

* **Spread Operator (`...`)**:
	+ Pros: Fast, efficient, and easy to read.
	+ Cons: Requires compatibility with older browsers.
* **Concatenation with Multiple Calls (`concat()`)**:
	+ Pros: Compatible with older browsers.
	+ Cons: Slower than using the spread operator.
* **Concatenation with Nested Calls (`concat()`, `concat()` again)**:
	+ Pros: May be more efficient due to fewer function calls.
	+ Cons: Less readable and harder to maintain.
* **Unshift Operator (`unshift()`)**:
	+ Pros: None notable.
	+ Cons: Slower, less compatible with older browsers.

**Other Considerations:**

* The test results may not reflect real-world scenarios where compatibility with older browsers is crucial.
* Using `concat()` multiple times can lead to more function calls and slower performance.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 111 on Linux

View result in a separate tab

Test name	Executions per second
spread	4822573.0 Ops/sec
concat	1281701.0 Ops/sec
concat2	3444358.0 Ops/sec
unshift	2719554.0 Ops/sec
unshift2	0.0 Ops/sec
flat	141643.4 Ops/sec

Related benchmarks:

spread vs concat vs unshift vs flat (version: 0)

Comparing performance of: spread vs concat vs concat2 vs unshift vs unshift2 vs flat

Created: one year ago by: Guest

Jump to the latest result

spread

concat

concat2

unshift

unshift2

flat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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