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

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
Array.prototype.push.apply
var params = [ "hello", true, 7 ]; var other = Array.prototype.push.apply([ 1, 2 ],params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	10726975.0 Ops/sec
spread operator	35024260.0 Ops/sec
Push	36156740.0 Ops/sec
Array.prototype.push.apply	26818246.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing the performance of different approaches to achieve similar results.

**Benchmark Definition**

The provided JSON represents a benchmark with four test cases:

* "Array concat vs spread operator vs push vs prototype.push.apply"
* Four individual test cases:
	+ "Array.prototype.concat"
	+ "spread operator"
	+ "Push"
	+ "Array.prototype.push.apply"

**Test Cases**

Each test case is defined by a "Benchmark Definition" string, which specifies the code to be executed. Here's a brief explanation of each:

1. **Array.prototype.concat**
The first test case uses the traditional `concat()` method to concatenate two arrays.

```javascript
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params);
```

This approach creates a new array by copying both input arrays and then merging them into a single array using the `concat()` method.

**Pros:** Simple and straightforward. No need to worry about memory allocation or bounds checking.

**Cons:** Creates a new array, which can be memory-intensive for large inputs.

2. **spread operator**
The second test case uses the spread operator (`...`) to concatenate two arrays.

```javascript
var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ];
```

This approach creates a new array by copying all elements from the first input array and then appending them to the second input array using the spread operator.

**Pros:** Creates a new array with minimal memory allocation. Can be more efficient than `concat()` for large inputs.

**Cons:** May not work correctly in older browsers that don't support the spread operator.

3. **Push**
The third test case uses the `push()` method to concatenate two arrays.

```javascript
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].push(...params);
```

This approach modifies the original array by appending new elements using the `push()` method and spread operator.

**Pros:** Modifies the original array in place, which can be memory-efficient for large inputs.

**Cons:** May have unexpected side effects if not used carefully. Can also lead to stack overflows if too many elements are pushed onto the array.

4. **Array.prototype.push.apply**
The fourth test case uses `push()` with `apply()` to concatenate two arrays.

```javascript
var params = [ "hello", true, 7 ];
var other = Array.prototype.push.apply([ 1, 2 ], params);
```

This approach creates a new array by copying all elements from the input array and then pushing them onto an existing array using `push()` with `apply()`.

**Pros:** Similar to the traditional `concat()` method but more flexible.

**Cons:** Creates a new array, which can be memory-intensive for large inputs.

**Other Considerations**

* **Memory allocation**: When concatenating arrays, it's essential to consider the memory allocation overhead. The spread operator and `push()` approaches can be more memory-efficient than traditional `concat()` method.
* **Browser support**: The spread operator is not supported in older browsers, so it may need special handling or fallbacks to ensure compatibility.

**Alternatives**

If you don't have access to MeasureThat.net or want to explore other options, here are some alternative benchmarking tools:

1. **jsbench**: A popular online JavaScript benchmarking tool that allows users to create and run microbenchmarks.
2. **jsPerf**: A Chrome extension that provides a simple way to compare the performance of different JavaScript code snippets.
3. **Bench.js**: A lightweight, high-performance benchmarking library for Node.js and browser-based environments.

These alternatives offer similar functionality to MeasureThat.net, but with slightly different features and user interfaces.

Related benchmarks:

Array concat vs spread operator vs push vs prototype.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 Array.prototype.push.apply

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Array.prototype.push.apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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