Benchmark: Array.prototype.concat vs spread operator

Script Preparation code:

var arr = Array(100).fill([{n: ''}]);

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 27 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

MeasureThat.net is comparing three approaches to concatenate arrays:

1. **Array.prototype.concat()**: A traditional method that uses the `concat()` function on the `Array` prototype.
2. **Spread operator (`...`)**: A new ES6 feature that allows spreading an array's elements into a new array using the syntax `new Array([...]).push(...)` or simply `[...array]`.
3. **jQuery merge**: Using the `$.merge()` function from jQuery to concatenate arrays.

**Options comparison**

The three options are being compared in terms of performance, which is typically measured as the number of executions per second (ExecutionsPerSecond).

* **Array.prototype.concat()**: This method creates a new array and then pushes each element from the original array into it. It's a simple but potentially slow approach.
* **Spread operator (`...`)**: This method is generally faster because it only requires a single operation to create a new array with the spread elements.
* **jQuery merge**: jQuery provides its own implementation of array concatenation, which might be optimized for performance.

**Pros and Cons**

Here's a brief summary:

* **Array.prototype.concat()**:
	+ Pros: Simple to implement, widely supported.
	+ Cons: May be slower due to the need to create a new array.
* **Spread operator (`...`)**:
	+ Pros: Fast, modern, and widely supported.
	+ Cons: Requires JavaScript 5.1 or later (ES6).
* **jQuery merge**: 
	+ Pros: Optimized for performance, widely used in web development.
	+ Cons: Adds an extra dependency on jQuery.

**Library usage**

The `$.merge()` function is part of the jQuery library. It's a utility function that allows concatenating two arrays.

**Special JS feature or syntax**

None mentioned in this benchmark.

**Other alternatives**

If you're interested in exploring other approaches, consider:

* **Array.prototype.push()**: Instead of creating a new array, push elements onto the original array.
* **Set**: In modern JavaScript, using `new Set()` and adding elements to it is another way to create an array-like object.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Browser/OS: Chrome 63 on Mac OS X 10.13.3

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6607075.5 Ops/sec
spread operator	5146072.0 Ops/sec
jQuery merge	1900181.5 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator (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 27 days ago):