Benchmark: concat vs lodash.concat vs. push.apply vs. spread operator vs. push in for loop (fixed spread)

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var arr1 = ["what", "is", "this"];
var arr2 = ["this", "is", "a", "test", "hello", "how", "are", "you", "today"];

Tests:

Array.prototype.concat
var result = arr1.concat(arr2);
Lodash concat
var result = _.concat(arr1, arr2);
Array.prototype.push.apply()
Array.prototype.push.apply(arr1, arr2);
spread operator
var result = [...arr1, ...arr2]
cached for + push
for (var i = 0, l = arr2.length; i < l; i++) { arr1.push(arr2[i]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Lodash concat
Array.prototype.push.apply()
spread operator
cached for + push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 99 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	2310168.0 Ops/sec
Lodash concat	994979.4 Ops/sec
Array.prototype.push.apply()	1508987.4 Ops/sec
spread operator	0.2 Ops/sec
cached for + push	383332.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, the options being compared, their pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare the performance of different methods for concatenating two arrays in JavaScript:

1. `Array.prototype.concat()`
2. Lodash `_.concat()` function
3. `Array.prototype.push.apply()`
4. Spread operator (`...`)
5. A "cached for + push" approach using a loop

**Options being compared**

Here's a brief explanation of each option:

* **`Array.prototype.concat()`**: This method creates a new array by concatenating the elements of two or more arrays.
* **Lodash `_.concat()` function**: Lodash is a popular JavaScript library that provides a lot of utility functions. The `_.concat()` function is used to concatenate arrays.
* **`Array.prototype.push.apply()`**: This method adds multiple elements to the end of an array, similar to how `push()` works individually. It's often faster than using `push()` in a loop because it avoids creating intermediate arrays.
* **Spread operator (`...`)**: The spread operator is used to create a new array by spreading the elements of another array into a new array.
* **"cached for + push" approach**: This approach uses a loop to iterate over one of the arrays and push each element onto the other array. It's likely implemented in native code, making it fast.

**Pros and Cons**

Here are some pros and cons for each option:

* **`Array.prototype.concat()`**:
	+ Pros: Easy to use, works well with most array implementations.
	+ Cons: Creates a new array, can be slower than other methods.
* **Lodash `_.concat()` function**:
	+ Pros: Convenient to use, optimized for performance.
	+ Cons: Requires importing an external library (Lodash).
* **`Array.prototype.push.apply()`**:
	+ Pros: Fast, avoids creating intermediate arrays.
	+ Cons: May not work well with some array implementations or in older browsers.
* **Spread operator (`...`)**:
	+ Pros: Easy to use, creates a new array.
	+ Cons: Can be slower than other methods due to the overhead of creating an array.
* **"cached for + push" approach**:
	+ Pros: Fast, likely implemented in native code.
	+ Cons: May not be as convenient to use as other methods.

**Other considerations**

When choosing a method for concatenating arrays, consider the following factors:

* Performance: If speed is critical, `push.apply()` or the "cached for + push" approach might be a good choice. However, if you need to support older browsers or have complex array implementations, `concat()` or the spread operator might be better.
* Readability and maintainability: If code readability is important, `concat()` or the spread operator are usually a safe choice because they're easy to understand.
* Library dependencies: For Lodash, consider whether the benefits of using the library outweigh the overhead of importing it.

**Alternative methods**

If you don't need to concatenate arrays in JavaScript, there are other approaches:

* Using `Array.prototype.reduce()` or `Array.prototype.forEach()` with a callback function can also concatenate arrays.
* You can use `setInterval()` and accumulate elements into an array using `push()`.
* In some cases, creating a new array and then pushing elements onto it might be faster than concatenating in place.

Related benchmarks:

concat vs lodash.concat vs. push.apply vs. spread operator vs. push in for loop (fixed spread) (version: 0)

Ripped off from another user but fixed a bug in "spread"

Comparing performance of: Array.prototype.concat vs Lodash concat vs Array.prototype.push.apply() vs spread operator vs cached for + push

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Lodash concat

Array.prototype.push.apply()

spread operator

cached for + push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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