Benchmark: Array.prototype.concat vs spread operator

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.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);
Lodash concat
var params = [ "hello", true, 7 ]; var other = _.concat([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
Lodash concat

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 JSON data and explain what is being tested.

**Benchmark Definition**

The benchmark definition outlines the comparison between two approaches:

1. **Array.prototype.concat**: The traditional method of concatenating arrays using the `concat()` method.
2. **Spread operator (`...`)**: The new ES6 spread operator, introduced in ECMAScript 2015, which allows for spreading elements from an array into another.

**Options Compared**

The benchmark compares these two approaches for different types of arrays:

* A simple array with a few elements (`["hello", true, 7]`)
* An existing array concatenated with the new elements (`[1, 2].concat(params)`)
* The spread operator applied to an existing array (`[1, 2, ...params]`)

**Pros and Cons of Each Approach**

* **Array.prototype.concat**: This method is widely supported across browsers and has been the standard way of concatenating arrays for a long time. However, it can be slower than the spread operator due to its overhead.
	+ Pros: Wide browser support, well-established
	+ Cons: Slower than the spread operator
* **Spread operator (`...`)**: This method is more concise and has been optimized by modern browsers, making it a good choice for concatenating arrays. However, its support was not as widespread until recent versions of browsers.
	+ Pros: More concise, faster execution
	+ Cons: Limited browser support in older versions

**Library Usage**

The benchmark uses the following libraries:

* **Lodash**: A popular utility library that provides a `concat` function to concatenate arrays. The Lodash implementation is used as a reference point for the benchmark.
* **jQuery**: A widely-used JavaScript library that provides a `$merge` function to concatenate arrays. However, the jQuery implementation was not executed in this benchmark.

**Special JS Features or Syntax**

The benchmark uses the spread operator (`...`) introduced in ECMAScript 2015. This syntax allows elements from an array to be spread into another array, making it more concise and expressive.

**Other Alternatives**

If you were to implement your own concatenation function, you could use a simple loop-based approach or a more efficient algorithm like the "insertion sort" method. However, these alternatives are not part of this benchmark.

In summary, the MeasurThat.net benchmark compares the performance of two approaches for concatenating arrays: traditional `concat()` and the new ES6 spread operator. The benchmark highlights the pros and cons of each approach, including their speed, browser support, and concise syntax.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:79.0) Gecko/20100101 Firefox/79.0

Browser/OS: Firefox 79 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	13108487.0 Ops/sec
spread operator	12545187.0 Ops/sec
jQuery merge	0.0 Ops/sec
Lodash concat	2773064.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 vs Lodash concat

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

jQuery merge

Lodash concat

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):