Benchmark: Array.prototype.concat vs spread operator - Immutable version

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 ]
Lodash 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
Lodash merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 71 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3217234.2 Ops/sec
spread operator	9709545.0 Ops/sec
Lodash merge	212867.8 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

The benchmark compares three different ways to concatenate (merge) two arrays in JavaScript:

1. `Array.prototype.concat` method
2. Spread operator (`...`)
3. A third-party library, Lodash, using its `merge` function

**Options compared:**

* **Traditional concatenation**: Using the `concat()` method to merge two arrays.
* **Spread operator**: Using the new ES6 syntax (`[ ...array1, ...array2 ]`) to merge two arrays.
* **Lodash merge**: Utilizing a third-party library (Lodash) to merge two arrays using its `merge` function.

**Pros and cons of each approach:**

1. **Traditional concatenation**
	* Pros:
		+ Well-established method in JavaScript
		+ Widely supported across browsers and environments
	* Cons:
		+ Not as concise or readable as other methods
		+ May be slower due to the overhead of a function call
2. **Spread operator**
	* Pros:
		+ Concise syntax, easy to read and write
		+ Performance is often comparable to `concat()` method
		+ Widely supported across modern browsers and environments
	* Cons:
		+ Not available in older JavaScript versions (pre-ES6)
3. **Lodash merge**
	* Pros:
		+ High-performance implementation, often faster than other methods
		+ Robust error handling and edge case management
	* Cons:
		+ Requires an external library to be included
		+ May add additional overhead due to the library's dependencies

**Other considerations:**

* **Immutable data**: The benchmark simulates an environment where immutable data is a requirement. This ensures that all methods create a fresh array without modifying the original arrays.
* **Third-party libraries**: Lodash is used as an example of a third-party library that provides a high-performance merge function.

**What library is being used?**

Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks such as data manipulation, functional programming, and more. In this benchmark, the `merge` function from Lodash is used to concatenate two arrays.

**Special JS feature or syntax?**

Yes, the spread operator (`...`) is a special ES6 feature in JavaScript that allows creating a new array by spreading (unpacking) the elements of an existing array into it.

**Alternatives:**

Other alternatives for merging arrays include:

* `Array.prototype.push` method
* Using the `reduce` method to merge arrays
* Implementing a custom merge function
* Utilizing other third-party libraries, such as Underscore.js or jQuery

Keep in mind that each of these alternatives may have their own pros and cons, and some might be more suitable for specific use cases than others.

Related benchmarks:

Array.prototype.concat vs spread operator - Immutable version (version: 0)

Compare the new ES6 spread operator with the traditional concat() method. All methods create a fresh array to simulate an environment where immutable data is a requirement.

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

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Lodash merge

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated 2 months ago):