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

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	45942352.0 Ops/sec
Lodash concat	6113012.0 Ops/sec
Array.prototype.push.apply()	4335668.0 Ops/sec
spread operator	46241276.0 Ops/sec
cached for + push	666118.2 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 explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of different ways to concatenate or manipulate arrays in JavaScript:

1. Using `Array.prototype.concat()`
2. Using Lodash's `concat()` function
3. Using the spread operator (`...`)
4. Using `Array.prototype.push.apply()`
5. Using a cached for loop with `push`

**Options Compared**

Each option is compared to measure its performance advantage over others.

**Pros and Cons of Each Approach:**

1. **`Array.prototype.concat()`**: This method creates a new array by copying elements from both input arrays. It's straightforward but can be slower than other methods due to the overhead of creating a new array.
	* Pros: Easy to read and understand, no dependencies on external libraries.
	* Cons: Can create a new object in memory, leading to increased garbage collection.
2. **Lodash's `concat()` function**: Lodash provides a more efficient implementation of concatenation that avoids the overhead of creating a new array.
	* Pros: Optimized for performance, avoids unnecessary allocations.
	* Cons: Requires including an external library (Lodash), which might not be desirable in all projects.
3. **Spread Operator (`...`)**: This operator creates a new array by spreading elements from both input arrays.
	* Pros: Memory-efficient, no dependencies on external libraries.
	* Cons: Might require modern JavaScript versions (ECMAScript 2018+), can lead to unexpected behavior if not used carefully.
4. **`Array.prototype.push.apply()`**: This method applies an iterable array as arguments to the `push()` method of the receiving array.
	* Pros: Memory-efficient, optimized for performance.
	* Cons: Can be slower than other methods due to the overhead of calling `push()`, requires careful handling of arrays and iterators.
5. **Cached for loop with `push```**: This approach uses a cached loop to push elements from one array into another.
	* Pros: Optimized for performance, memory-efficient.
	* Cons: Requires manual implementation of caching, can be less readable than other methods.

**Library Usage**

The benchmark includes Lodash's `concat()` function, which is used in the second test case. This highlights the importance of considering external dependencies when measuring performance.

**Special JavaScript Features or Syntax**

None of the provided options use special JavaScript features or syntax that would require explanation beyond their basic functionality.

**Other Alternatives**

If none of these methods are suitable for your specific use case, you might consider using other alternatives:

* Using a different array concatenation method, such as `Array.prototype.reduce()`
* Implementing a custom concatenation function with optimized performance
* Leveraging modern JavaScript features like `BigInt` or `Symbol` to improve performance

In conclusion, the benchmark provides a comprehensive comparison of different methods for concatenating and manipulating arrays in JavaScript. Understanding the pros and cons of each approach can help developers choose the most suitable method for their specific use cases.

Related benchmarks:

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

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

Created: 7 years ago by: Registered User

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>

Fastest: N/A

Slowest: N/A

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