Benchmark: Array concat vs spread operator vs push vs push apply

Tests:

Array.prototype.concat
var params = [5 , 8, 9 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [5 , 8, 9 ]; var other = [ 1, 2, ...params ]
Push
var params = [5 , 8, 9 ]; var other = [ 1, 2 ].push(...params);
Push w/apply
var params = [5 , 8, 9 ]; var ar = [ 1, 2 ] var other = ar.push.apply(ar, params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Push w/apply

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; rv:109.0) Gecko/20100101 Firefox/114.0

Browser/OS: Firefox 114 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	26255906.0 Ops/sec
spread operator	24996580.0 Ops/sec
Push	33238788.0 Ops/sec
Push w/apply	34691940.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition JSON and test case describe four different methods for concatenating or merging arrays: the traditional `concat()` method, the new ES6 spread operator (`...`), `push`, and `push.apply`. We will analyze each method, its pros and cons, and consider alternative approaches.

**Benchmark Definition**

The benchmark definition states that we want to compare:

* `Array.prototype.concat`
* The new ES6 spread operator (`...`)
* `push`
* `push.apply`

**Methods and their Pros/Cons:**

### 1. `Array.prototype.concat`

* **Method:** `concat([array1], [array2])` merges two arrays into a single array.
* **Pros:** Well-established, widely supported, and easy to use.
* **Cons:** Can be slow for large arrays due to the overhead of creating a new array object.

### 2. New ES6 Spread Operator (`...`)

* **Method:** `var arr = [1, 2]; var other = [...arr, 3, 4];`
* **Pros:** Fast, concise, and efficient.
* **Cons:** Requires JavaScript engine support for the spread operator (not all browsers or environments).

### 3. `push`

* **Method:** `array.push(element)` adds an element to the end of an array.
* **Pros:** Fast, as it only modifies the existing array object.
* **Cons:** Can lead to inefficient stack operations if the array is large and pushed multiple times.

### 4. `push.apply`

* **Method:** `Array.prototype.push.apply(arr, [element1], [element2])` applies an array of elements to a target array using `push`.
* **Pros:** Similar performance benefits as `push`, but with more flexibility.
* **Cons:** Less readable than the other methods and may be less supported by older browsers.

**Library and Purpose**

None of these methods rely on external libraries. However, if we were to use libraries like Lodash or Ramda for array manipulation, they might provide additional benefits or optimizations.

**Special JS Feature/Syntax: ES6 Spread Operator**

The new ES6 spread operator (`...`) is a concise way to merge arrays. It was introduced in ECMAScript 2015 and has become widely adopted since then. Its performance benefits come from the fact that it avoids creating a new array object, instead modifying the existing one.

**Alternative Approaches**

Other methods for merging or concatenating arrays include:

* Using `Array.prototype.reduce()` with an initial value.
* Creating a new array using the spread operator (`[...array1, ...array2]`) and then assigning it to a variable.
* Using `Array.prototype.concat()` followed by assignment.

These alternatives may offer different performance benefits or trade-offs in terms of readability. However, they are generally less efficient than the methods described above.

**Conclusion**

Each method has its strengths and weaknesses. The choice between them ultimately depends on your specific use case, performance requirements, and personal preference. MeasureThat.net provides a useful platform for comparing these methods and determining their relative performance on different hardware configurations.

Related benchmarks:

Array concat vs spread operator vs push vs push apply (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 vs Push w/apply

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Push w/apply

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