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

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]) }
naive
for (var i = 0, l = arr2.length; i < l; i++) { arr1[i] = 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
naive

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_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15

Browser/OS: Safari 14 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6879886.5 Ops/sec
Lodash concat	2392302.8 Ops/sec
Array.prototype.push.apply()	3566665.0 Ops/sec
spread operator	0.0 Ops/sec
cached for + push	934247.2 Ops/sec
naive	1155059.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 what is being tested in the provided JSON benchmark.

The benchmark compares six different approaches to concatenate two arrays:

1. **`Array.prototype.concat()`**: This method creates a new array by concatenating the elements of two or more arrays.
2. **Lodash `concat()`**: This function is part of the Lodash library, which provides a set of utility functions for functional programming. The `concat()` function takes two or more arrays as arguments and returns a new array with the concatenated elements.
3. **`Array.prototype.push.apply()`**: This method applies an array to the end of another array using the `push()` method repeatedly.
4. **Spread operator (`...`)**: This operator allows you to expand an array into multiple arguments when calling a function, including `Array.prototype.concat()`.
5. **Cached `for` loop with `push()`**: This approach uses a `for` loop to iterate over one of the arrays and push each element onto the other array using the `push()` method.
6. **Naive approach (manual concatenation)**: This involves manually iterating over both arrays and pushing each element onto a new array.

Now, let's discuss the pros and cons of each approach:

*   **`Array.prototype.concat()`**: Pros: concise and readable; Cons: creates a new array object, which can be memory-intensive for large datasets. The spread operator is similar but does not create an intermediate array.
*   **Lodash `concat()`**: Pros: provides a standardized and consistent way to concatenate arrays across different browsers; Cons: adds external dependency (the Lodash library). Note that it's optimized for performance in modern browsers.
*   **`Array.prototype.push.apply()`**: Pros: does not create an intermediate array; Cons: may be slower than `concat()` due to the repeated calls to `push()`.
*   **Spread operator (`...`)**: Pros: concise and readable; Cons: only supported in recent browsers (ECMAScript 2015+). However, it's a more efficient alternative to creating intermediate arrays.
*   **Cached `for` loop with `push()`**: Pros: does not require an external library; Cons: less concise and may be slower than the other approaches due to the repeated calls to `push()`.
*   **Naive approach (manual concatenation)**: Pros: does not require any external libraries or optimizations; Cons: can be verbose and error-prone.

In general, for most use cases, `Array.prototype.concat()` is a good choice due to its concise syntax and performance. The spread operator (`...`) is another popular alternative that provides similar benefits without creating intermediate arrays.

As for special JavaScript features or syntax, the benchmark uses ES6+ features like template literals (e.g., `var arr1 = [\"what\", \"is\", \"this\"];`), arrow functions (not explicitly shown but implied by the use of `var result = arr1.concat(arr2);`), and spread operator (`var result = [...arr1, ...arr2];`). These features are widely supported in modern browsers.

If you're looking for alternatives to this benchmark, some other options include:

*   **Benchmarking libraries**: Libraries like Benchmark.js or Microbenchmark.js provide a more comprehensive set of benchmarking tools.
*   **Browser-specific benchmarks**: You can create benchmarks that target specific browser versions or features (e.g., using the `--browser` flag with Node.js).
*   **WebAssembly benchmarks**: For performance-critical code, you may want to explore WebAssembly-based benchmarks.

In conclusion, this benchmark provides a good starting point for understanding the performance differences between various array concatenation approaches in JavaScript. However, depending on your specific use case and requirements, you may need to experiment with different libraries, features, or optimization techniques to find the best solution for your needs.

Related benchmarks:

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

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

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

naive

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