Benchmark: Array.prototype.concat vs spread operator vs lodash.concat - variable and constant

Array.prototype.concat vs spread operator vs lodash.concat - variable and constant (version: 1)

Compare the new ES6 spread operator with the traditional concat() method and with the favourite _.concat() method, when an array from a variable is concatenated with an array literal.

Comparing performance of: Array.prototype.concat vs spread operator vs lodash concat

Created: 5 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.js"></script>

Script Preparation code:

var params = [ "hello", true, 7 ];

Tests:

Array.prototype.concat
var result = [ 1, 2 ].concat(params);
spread operator
var result = [ 1, 2, ...params ]
lodash concat
var result = _.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
lodash concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8634934.0 Ops/sec
spread operator	29073968.0 Ops/sec
lodash concat	3613166.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark information.

**What is being tested?**

The website, MeasureThat.net, is testing three different approaches to concatenate an array with another array:

1. **Array.prototype.concat**: The traditional method of concatenating two arrays using a native JavaScript function.
2. **Spread operator**: A new ES6 syntax for spreading the contents of an array or object into a new array (e.g., `[...array]`).
3. **_concat() from Lodash library**: A utility function from the popular Lodash library, which is often used in JavaScript applications.

**Options comparison**

The three approaches are being compared to determine their performance differences when concatenating an array with another array using a variable source (in this case, `params`) and a constant source (in this case, `[1, 2]`).

**Pros and cons of each approach:**

* **Array.prototype.concat**:
	+ Pros: Widely supported, familiar syntax.
	+ Cons: Can be slower than other methods due to its iterative nature.
* **Spread operator**:
	+ Pros: New and efficient method for spreading arrays, widely adopted in modern JavaScript code.
	+ Cons: Requires knowledge of ES6 syntax.
* **_concat() from Lodash library**:
	+ Pros: Fast and reliable, often used in production applications.
	+ Cons: Additional dependency on the Lodash library.

**Library usage**

In this benchmark, the _concat function from the Lodash library is being tested. The Lodash library provides a collection of utility functions that can simplify common programming tasks, such as array manipulation. In this case, `_concat` is used to concatenate two arrays in a fast and efficient manner.

**Special JS feature or syntax**

The benchmark uses ES6 spread operator syntax (`[...params]`) to test its performance. This syntax was introduced in ECMAScript 2015 (ES6) as a new way of spreading the elements of an array into a new array.

Now, let's look at some alternatives:

* Other methods for concatenating arrays include using `Array.prototype.push()` or `Array.prototype.concat()` with an initial array.
* For more complex concatenation scenarios, libraries like Lodash or Underscore.js provide additional functions that can handle these cases efficiently.

Related benchmarks: