Benchmark: Array concat vs spread operator vs push vs array length + assign

Script Preparation code:

var orig = [ "hello", true, 7 ];

Tests:

Array.prototype.concat
var other = [ 1, 2 ].concat(orig);
spread operator
var other = [ 1, 2, ...orig ]
Push
var other = [ 1, 2 ].push(...orig);
length + assign
var other = [ 1, 2 ]; other.length = other.length + orig.length for(var i = 0; i < orig.length; i++) { other[other.length + i] = orig[i] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
length + assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4316643.5 Ops/sec
spread operator	7995311.0 Ops/sec
Push	7441763.0 Ops/sec
length + assign	1123919.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is a complex task, as it involves understanding various optimization techniques and browser-specific nuances.

The provided benchmark measures the performance of four different approaches to concatenate an array:

1. **Array.prototype.concat()**: This method takes an existing array and returns a new array that contains all elements from both arrays.
2. **Spread operator (Rest parameter)**: This is a syntax feature introduced in ECMAScript 2015, which allows you to create a new array by spreading the elements of another array.
3. **Array.prototype.push()**: This method adds one or more elements to the end of an array and returns the length of the array after the addition.
4. **Length + assign**: This approach involves calculating the total length of both arrays and then assigning each element of the original array to a new index in the target array, starting from the calculated offset.

Let's break down the pros and cons of each approach:

**Array.prototype.concat()**:

Pros:

* Well-supported by most modern browsers
* Easy to understand and implement

Cons:

* Creates a new array, which can be inefficient for large datasets
* May not be as performant as other methods due to overhead from creating an intermediate array

**Spread operator (Rest parameter)**:

Pros:

* Fast and efficient, as it avoids the creation of an intermediate array
* Modern browsers support this syntax

Cons:

* Requires ECMAScript 2015 or later support
* May not be supported by older browsers or environments

**Array.prototype.push()**:

Pros:

* Inefficient for large arrays due to repeated push operations, but can be optimized with a batch operation (pushing multiple elements at once)
* Can be used in conjunction with other methods, like slice(), to create a new array

Cons:

* Slow for small arrays or arrays with many elements
* Creates intermediate arrays when using slice() or other array methods

**Length + assign**:

Pros:

* Fast and efficient, as it avoids the creation of intermediate arrays
* Works well with large datasets due to its direct assignment approach

Cons:

* Requires manual calculation of offsets, which can be error-prone
* May not be as intuitive for developers unfamiliar with this approach

As for the libraries used in this benchmark, none are explicitly mentioned.

The test cases use special JavaScript features such as the spread operator, which is a modern syntax introduced in ECMAScript 2015. This feature allows you to create a new array by spreading the elements of another array.

Other alternatives to consider when concatenating arrays include:

* Using **Array.prototype.slice()**, which creates a shallow copy of an array
* Utilizing **Array.prototype.splice()**, which modifies an existing array and returns the removed elements
* Implementing custom concatenation functions, like using **reduce()** or **forEach()**, for more control over the operation

Related benchmarks:

Array concat vs spread operator vs push vs array length + assign (version: 0)

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs length + assign

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

length + assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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