Benchmark: concat vs lodash.concat vs. push.apply vs. spread operator (fixed) 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: 3 years ago)

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

Browser/OS: Firefox 94 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4887110.0 Ops/sec
Lodash concat	1920064.9 Ops/sec
Array.prototype.push.apply()	2457166.5 Ops/sec
spread operator	0.4 Ops/sec
cached for + push	1909781.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmarking test case, which compares the performance of different methods for concatenating two arrays.

**Benchmark Definition**

The test aims to measure the execution time and throughput of four different approaches:

1. **Array.prototype.concat()**: The built-in method that concatenates two arrays using the `+` operator.
2. **Lodash concat**: A custom implementation using the Lodash library, which provides a utility function for array concatenation.
3. **Array.prototype.push.apply()**: A method that uses the `apply()` method to concatenate an array by pushing elements onto it.
4. **Spread operator (fixed) vs. push in for loop**: Two variations of using the spread operator and a traditional `for` loop with `push()` to concatenate arrays.

**Library used**

* Lodash: A popular JavaScript utility library that provides various functions for tasks like string manipulation, array manipulation, and more.
	+ In this benchmark, Lodash is used in its `concat()` function to concatenate the two input arrays.

**Special JS features/syntax**

None are explicitly mentioned or required for the test. However, it's worth noting that some modern JavaScript engines, like V8 (used by Google Chrome), have introduced new features and optimizations over time. In this benchmark, all tests run on an older version of Gecko/20100101, which is still widely supported but may not reflect the latest engine optimizations.

**Pros and cons of each approach**

1. **Array.prototype.concat()**: This method is likely to be the fastest since it's optimized for performance and used extensively in the JavaScript ecosystem.
	* Pros: High performance, simple implementation, widely supported.
	* Cons: May use more memory due to creating a new array object, which can be a concern for large datasets.
2. **Lodash concat**: Lodash provides an optimized implementation of array concatenation using its `concat()` function.
	* Pros: Fast and efficient, leverages the optimized Lodash implementation, easy to test.
	* Cons: Requires importing the Lodash library, may add overhead due to the additional dependency.
3. **Array.prototype.push.apply()**: This method uses the `apply()` method to concatenate an array by pushing elements onto it.
	* Pros: Simple implementation, leverages native methods, can be faster than traditional `for` loops.
	* Cons: May have performance regressions if not optimized correctly, can lead to stack overflows for large datasets.
4. **Spread operator (fixed) vs. push in for loop**: Using the spread operator and a `for` loop with `push()` offers an alternative way to concatenate arrays.
	* Pros: Easy to implement and understand, can be faster than traditional loops, modern syntax.
	* Cons: May have performance overhead due to creating intermediate arrays or modifying objects, may not work as expected for certain edge cases.

**Other alternatives**

Some other methods that could be tested in this benchmark include:

* **Array.prototype.push()**: Using the `push()` method directly on one of the arrays being concatenated.
* **Array.prototype.splice()**: Using the `splice()` method to concatenate two arrays by removing elements from the first array and adding them to the second array.
* **Array.prototype.set()**: Using the `set()` method, which is a new addition in ECMAScript 2019 (ES10), to set the length of an array while concatenating elements.

These alternative methods would add more complexity to the benchmark but could provide additional insights into performance optimizations and language design trade-offs.

Related benchmarks:

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

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

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