Benchmark: Array concat vs spread operator vs push vs Array.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: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0

Browser/OS: Firefox 108 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7512703.5 Ops/sec
spread operator	7849038.5 Ops/sec
Push	11832251.0 Ops/sec
Array.prototype.push.apply	8871504.0 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 provided benchmark JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare the performance of four different methods for concatenating arrays in JavaScript:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. `push()` with the spread operator (`...`)
4. `Array.prototype.push.apply()`

**Options Compared**

Each test case uses a similar input data structure, which is an array `params` containing three elements: a string, a boolean, and a number.

The benchmark compares the execution time of each method for concatenating this array with another fixed-size array `[1, 2]`.

**Pros and Cons of Each Approach**

Here's a brief analysis of each approach:

1. **Array.prototype.concat()**: This is the traditional way to concatenate arrays in JavaScript. It creates a new array by copying elements from both arrays. While it's widely supported, it can be slow for large datasets due to the overhead of creating a new array.
	* Pros: Widely supported, easy to use.
	* Cons: Can be slow, creates a new array.
2. **Spread Operator (`...`)**: Introduced in ES6, this operator allows you to spread elements from one or more arrays into another array. It's a concise way to concatenate arrays without creating a new one.
	* Pros: Concise, efficient (no overhead of creating a new array).
	* Cons: May not work as expected if the input data is large or complex.
3. **Push with Spread Operator (`...`)**: This approach uses the spread operator to pass elements from `params` to the `push()` method of the target array. It's similar to using `concat()`, but avoids creating a new array.
	* Pros: Efficient (no overhead of creating a new array), concise.
	* Cons: May not be as readable or intuitive as `concat()`.
4. **Array.prototype.push.apply()**: This method applies an array of arguments to the `push()` method, which can be more efficient than calling `push()` multiple times with individual elements.
	* Pros: Efficient (no overhead of creating a new array), concise.
	* Cons: May not be as readable or intuitive as `concat()`.

**Library and Special JS Features**

None of the test cases use any libraries or special JavaScript features beyond what's built into the browser. The spread operator is a standard feature in modern JavaScript, while `Array.prototype.concat()`, `push()`, and `Array.prototype.push.apply()` are all part of the standard library.

**Considerations**

When choosing an approach for concatenating arrays, consider the size and complexity of your data, as well as readability and maintainability. For small to medium-sized datasets, any of these approaches should be sufficient. However, for large or complex datasets, you may want to consider using `concat()` with a more modern browser or JavaScript engine that supports its performance improvements.

**Alternatives**

Other alternatives for concatenating arrays include:

* Using the `Set` constructor and then converting it back to an array: `new Set([...params, 1, 2]).values().toArray()`
* Using the `reduce()` method: `[...params, ...[1, 2].reduce((a, b) => [...a, b])]`

However, these alternatives may not be as efficient or readable as the approaches compared in this benchmark.

Related benchmarks:

Array concat vs spread operator vs push vs Array.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: 4 years 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 2 months ago):