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

Script Preparation code:

var params = [ "hello", true, 1, { foo: 'bar' } ];
var concat = (input) => [].concat(params);
var push = (input) => [].push(...input);
var concatApply = (input) => Array.prototype.concat.apply([], input);
var pushApply = (input) => Array.prototype.push.apply([], input);
var spread = (input) => [...input];

Tests:

Array.prototype.concat
const result = concat(params);
Array.prototype.push spread
const result = push(params);
Array.prototype.concat.apply
const result = concatApply(params);
Array.prototype.push.apply
const result = pushApply(params);
Spread
const result = spread(params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Array.prototype.push spread
Array.prototype.concat.apply
Array.prototype.push.apply
Spread

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares four ways to concatenate or spread arrays in JavaScript:

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

These methods are used to add one or more arrays (or values) to the end of another array.

**Benchmark Definition**

The benchmark definition json provides some context:

* The script preparation code defines four functions: `concat`, `push`, `concatApply`, and `pushApply`.
* These functions take an input array `params` and concatenate/spread it using different methods.
* The html preparation code is empty, which means that the test is run in a headless browser environment.

**Test Cases**

The individual test cases are defined as:

1. `Array.prototype.concat`: Calls the `concat` function with the `params` array as input.
2. `Array.prototype.push spread`: Calls the `push` function with the `...` operator on the `params` array as input.
3. `Array.prototype.concat.apply`: Calls the `concatApply` function with the `apply` method on the `Array.prototype.concat` function, passing an empty array and the `params` array as input.
4. `Array.prototype.push.apply`: Calls the `pushApply` function with the `apply` method on the `Array.prototype.push` function, passing an empty array and the `params` array as input.
5. `Spread`: Calls the `spread` function with the `...` operator on the `params` array as input.

**Library Usage**

The benchmark uses the following library:

* None explicitly mentioned, but it's likely that the browser's built-in JavaScript engine is used.

**Special JS Features or Syntax**

This benchmark doesn't use any special JavaScript features or syntax beyond the spread operator (`...`). However, it does rely on the `apply` method, which is a non-standard feature in some browsers.

**Pros and Cons of Different Approaches**

Here's a brief overview of the pros and cons of each approach:

1. `Array.prototype.concat`:
	* Pros: Well-established, widely supported.
	* Cons: Less efficient than other methods for large arrays.
2. `Array.prototype.push spread`:
	* Pros: Efficient, easy to use.
	* Cons: May not work as expected in older browsers or with certain data types.
3. `Array.prototype.concat.apply`:
	* Pros: Flexible, can be used with any array type.
	* Cons: Less efficient than other methods for large arrays.
4. `Array.prototype.push.apply`:
	* Pros: Efficient, easy to use.
	* Cons: May not work as expected in older browsers or with certain data types.

**Other Alternatives**

Some alternative ways to concatenate or spread arrays in JavaScript include:

1. Using the `reduce` method:
```javascript
arr.concat([...params]);
```
2. Using a for loop:
```javascript
let result = [];
for (let i of params) {
  result.push(i);
}
result;
```
3. Using the `map` function:
```javascript
params.map((item) => {
  // do something with item
});
```

Note that these alternatives may have different performance characteristics and are not necessarily better or worse than the methods tested in this benchmark.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.62

Browser/OS: Chrome 103 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3542806.0 Ops/sec
Array.prototype.push spread	4535958.5 Ops/sec
Array.prototype.concat.apply	1586129.5 Ops/sec
Array.prototype.push.apply	2686974.5 Ops/sec
Spread	5354829.5 Ops/sec

Related benchmarks:

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

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

Comparing performance of: Array.prototype.concat vs Array.prototype.push spread vs Array.prototype.concat.apply vs Array.prototype.push.apply vs Spread

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Array.prototype.push spread

Array.prototype.concat.apply

Array.prototype.push.apply

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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