Benchmark: Array concat vs spread operator vs push (many numbers)

Tests:

Array.prototype.concat
var params = [ "hello", true, 7, 1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7, 1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7, 1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9 ]; var other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Browser/OS: Chrome 91 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7959887.5 Ops/sec
spread operator	3645044.2 Ops/sec
Push	4111131.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test comparing three approaches to concatenate or push an array: `Array.prototype.concat`, the spread operator (`...`), and `push()`. We'll break down each approach, its pros and cons, and discuss any notable libraries or special features used.

**1. Array.prototype.concat**

This is the traditional way of concatenating arrays in JavaScript. It creates a new array by copying elements from both input arrays.

Pros:

* Well-supported across browsers
* Easy to understand

Cons:

* Creates a new array object, which can be memory-intensive for large datasets
* Can lead to slower performance compared to other methods

**2. Spread Operator (`...`)**

The spread operator is a new feature introduced in ES6 (ECMAScript 2015). It allows you to expand an iterable (like an array) into individual elements.

Pros:

* Efficient, as it creates a new array object only when necessary
* Convenient syntax for creating new arrays

Cons:

* May have slower performance compared to traditional `concat()` due to the overhead of the spread operator
* Not supported in older browsers (e.g., Internet Explorer)

**3. Push()**

The `push()` method is used to add one or more elements to an array and returns the new length of the array.

Pros:

* Efficient, as it modifies the existing array object
* Convenient syntax for adding multiple elements

Cons:

* May have slower performance compared to traditional `concat()` due to the overhead of modifying the array
* Not suitable for concatenating arrays with different lengths

**Other Considerations**

* **Memory allocation**: When using `push()`, the browser needs to allocate memory for each new element added to the array. This can be a concern when dealing with large datasets.
* **Array references**: When using `concat()` or spread operator, the resulting array object is created and returned as reference. However, if you assign this new array to a variable, it will not affect the original array objects being concatenated.

**Notable Libraries**

In this benchmark test, there are no notable libraries used. The tests focus solely on native JavaScript methods.

**Special Features (None)**

There are no special features or syntaxes introduced in these tests.

Now, let's look at some alternative approaches for concatenating arrays:

* **Array.prototype.slice()**: This method creates a shallow copy of the array and returns it.
* **Array.prototype.set()**: This method is not supported in older browsers (e.g., Internet Explorer) and is generally considered an outdated approach.
* **Array.prototype.push.apply() / push.call()**: These methods allow you to apply multiple elements to the end of an array using `push()`.

In conclusion, while all three approaches have their pros and cons, the spread operator (`...`) provides a convenient syntax for creating new arrays while being efficient. However, it's essential to consider factors like browser support, memory allocation, and array references when choosing the best approach for your specific use case.

Related benchmarks:

Array concat vs spread operator vs push (many numbers) (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

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

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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