Benchmark: Array.prototype.concat vs ...spreadOperator vs $.merge

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

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 ]
jQuery merge
var params = [ "hello", true, 7 ]; var other = $.merge([1, 2], params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
jQuery merge

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

The benchmark compares three different approaches for concatenating arrays:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...` )
3. jQuery's `$merge()` method

**Options Comparison**

*   **Array.prototype.concat():** This method takes two or more arrays as arguments and returns a new array that contains all elements from the input arrays.
    *   Pros: Widely supported, easy to use, and suitable for simple concatenation scenarios.
    *   Cons: Can lead to performance issues when dealing with large arrays due to the creation of intermediate arrays.

*   **ES6 spread operator (`...` ):** This is a new syntax introduced in ECMAScript 2015 that allows spreading array elements into another array.
    *   Pros: More concise and readable than `concat()`, and avoids creating intermediate arrays. It's also supported by most modern browsers and Node.js versions.

*   **jQuery `$merge()` method:** This method is a convenience function provided by jQuery for merging two or more arrays.
    *   Pros: Easy to use, especially when working with existing jQuery codebases. However, it may not be suitable for performance-critical scenarios due to the overhead of the jQuery library.
    *   Cons: May introduce unnecessary complexity and slow down your application.

**Library and Syntax Considerations**

*   **jQuery merge**: The `$merge()` method is a part of the jQuery library. This benchmark uses an older version (3.3.1) as specified in the HTML preparation code.

**Special JS Features or Syntax**

None of these approaches use any special JavaScript features or syntax that would impact performance or compatibility.

**Other Alternatives**

If you prefer to avoid the spread operator, you could also consider using `Array.prototype.push()` followed by `return this;`:

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

Alternatively, if you're working with an older browser or environment that doesn't support the spread operator, you could use a library like Lodash's `_.merge()` function to merge arrays.

```javascript
const _ = require('lodash');

// ...

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

This benchmark provides a concise and readable way to compare the performance of these three approaches.

Latest run results:

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

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

Browser/OS: Chrome 69 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7656336.5 Ops/sec
spread operator	36716832.0 Ops/sec
jQuery merge	4254296.5 Ops/sec

Related benchmarks:

Array.prototype.concat vs ...spreadOperator vs $.merge (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs jQuery merge

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

jQuery merge

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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