Benchmark: array concat performance test (splice, concat, spread, push with spread)

Tests:

Splice
const testArray1 = [1, 2, 3]; const testArray2 = [4, 5, 6]; const newTestArray = testArray1.splice(testArray1.length, 0, ...testArray2);
Concat
const testArray = [1, 2, 3]; const testArray2 = [4, 5, 6]; const newTestArray = testArray.concat(testArray2);
Spread
const testArray = [1, 2, 3]; const testArray2 = [4, 5, 6]; const newTestArray = [...testArray, ...testArray2];
push-spread
const testArray = [1, 2, 3]; const testArray2 = [4, 5, 6]; const newTestArray = testArray.push(...testArray2);

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

push-spread

44.1M/s

Spread

31.3M/s

Splice

16.3M/s

Concat

11.1M/s

Fastest: push-spread (4.0x faster)

View exact numbers

✓ push-spread: 44,122,088 ops/sec
• Spread: 31,346,282 ops/sec
• Splice: 16,270,791 ops/sec
• Concat: 11,050,685 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice
Concat
Spread
push-spread

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Concat

17.1M/s

Spread

8.9M/s

push-spread

8.4M/s

Splice

6.6M/s

View exact numbers

Test name	Executions per second
✓ Concat	17,069,680 Ops/sec
Spread	8,941,482 Ops/sec
push-spread	8,430,439 Ops/sec
Splice	6,635,312 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Overview**

The benchmark is comparing the performance of four different methods to concatenate (join) arrays in JavaScript:

1. Splice with spread operator (`push(...array)`).
2. Concatenation using the `concat()` method.
3. Spread operator (`...`) with array literals.
4. Push with spread operator (`push(...array)`).

**Options Compared**

Each option has its pros and cons:

* **Splice with spread operator**: This method is concise, but it can be slower than other methods because it involves a function call and a potentially expensive operation to resize the array.
* **Concatenation using `concat()`**: This method is straightforward, but it creates a new array object every time, which can lead to memory allocation overhead. Additionally, it may be slower than other methods due to the creation of an intermediate array.
* **Spread operator with array literals**: This method is concise and efficient because it only involves creating a new array by copying elements from the original arrays. However, it may not work as expected if the original arrays are large or have complex structures.
* **Push with spread operator**: Similar to the splice approach, this method is concise but potentially slower due to the function call and resizing operation.

**Library/Function Considerations**

None of these methods rely on external libraries. They are all built-in JavaScript features.

**Special JS Features/Syntax (No special features used)**

There are no special JavaScript features or syntax used in these benchmark cases.

**Other Alternatives**

While not part of the original benchmark, other alternatives to concatenate arrays include:

* Using `Array.prototype.push()` and `Array.prototype.length`: This method is similar to push with spread but doesn't involve a function call.
* Using `Array.prototype.reduce()`: This method is more functional programming-style and can be used to concatenate arrays by reducing an accumulator array.

However, these alternatives may not be as concise or efficient as the methods being benchmarked.

array concat performance test (splice, concat, spread, push with spread) (version: 0)

Comparing performance of: `Splice vs Concat vs Spread vs push-spread`

Created: 4 years ago by: Guest

Go to the latest result

Splice

Concat

Spread

push-spread

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

array concat performance test (splice, concat, spread, push with spread) (version: 0)

Comparing performance of: Splice vs Concat vs Spread vs push-spread

Created: 4 years ago by: Guest

Go to the latest result

Splice

Concat

Spread

push-spread

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Splice vs Concat vs Spread vs push-spread`