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);

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

Test name	Executions per second
Splice	6635312.0 Ops/sec
Concat	17069680.0 Ops/sec
Spread	8941482.0 Ops/sec
push-spread	8430439.0 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.

Related benchmarks:

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

Jump to the latest result

Splice

Concat

Spread

push-spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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