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

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 ]
array push
var params = [ "hello", true, 7 ]; 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
array push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark.

**What is being tested?**

The benchmark compares three different ways to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`
2. The ES6 spread operator (`...`)
3. `Array.prototype.push.apply()` (which uses a technique called "spread and apply")

These methods are used to combine two or more arrays into one.

**Options compared**

The benchmark compares the performance of these three methods on small arrays with different characteristics, such as size and content.

Here's a brief overview of each method:

* `Array.prototype.concat()`: This method creates a new array by copying elements from both input arrays. It's been around since JavaScript 1.0.
* The ES6 spread operator (`...`): This method uses the syntax `[...array1, ...array2]` to create a new array by spreading elements from both input arrays.
* `Array.prototype.push.apply()`: This method uses the `push()` method to add all elements from an array into another array. It's often used with the spread operator (`...`) or as a fallback when the spread operator isn't supported.

**Pros and cons**

Here are some pros and cons of each approach:

* `Array.prototype.concat()`:
	+ Pros: Wide support across browsers, relatively simple to implement.
	+ Cons: Can be slower than other methods due to its overhead, may not perform well on large arrays.
* The ES6 spread operator (`...`):
	+ Pros: Fast and efficient, supports most modern browsers. Reduces code duplication and improves readability.
	+ Cons: Requires modern browser support (ES6+), can throw errors if not implemented correctly.
* `Array.prototype.push.apply()`:
	+ Pros: Wide support across browsers, can be faster than other methods due to its optimized implementation.
	+ Cons: May use more memory due to the overhead of the `push()` method, less readable code.

**Library and special JS features**

There is no specific library mentioned in this benchmark. The ES6 spread operator (`...`) is a built-in feature of modern JavaScript.

No special JS features are required for this benchmark.

**Other alternatives**

If you want to explore alternative methods for concatenating arrays, here are some other options:

* Using `Array.prototype.slice()` and then concatenating the two arrays: `[...array1].concat(array2)`
* Using `String.prototype.concat()` (for strings): `"hello".concat("world")`
* Using `Function.prototype.apply()` with an array as the first argument: `new Function('return ' + array1.join(',') + ';').apply(null, [array2])`

Keep in mind that these alternatives might have varying degrees of support across browsers and may not be as efficient or readable as the methods tested in this benchmark.

Related benchmarks:

Array.prototype.concat vs spread operator vs array push (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs array push

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

array push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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