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

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);
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
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7227314.5 Ops/sec
Lodash concat	3291399.8 Ops/sec
spread operator	4244343.0 Ops/sec
cached for + push	1222606.8 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's being tested in the provided JSON.

**Benchmark Definition**

The benchmark is comparing four different approaches to concatenate two arrays: `Array.prototype.concat()`, `Lodash.concat()`, using the spread operator (`...`), and a cached for loop (`push.apply()`).

**Options Comparison**

Here's a brief overview of each approach:

1. **`Array.prototype.concat()`**: This method creates a new array by copying elements from two arrays and returns it. It uses JavaScript's built-in `concat()` method.
2. **`Lodash.concat()`**: Lodash is a utility library that provides a `concat()` function, which is used here to concatenate the two arrays.
3. **Spread Operator (`...`)**: This operator creates a new array by spreading elements from two arrays into a new array.
4. **Cached for Loop (`push.apply()`)**: This approach uses a loop to push elements from one array onto another.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **`Array.prototype.concat()`**:
	* Pros: Simple, widely supported, and fast.
	* Cons: Creates a new array, which can be memory-intensive for large inputs.
2. **`Lodash.concat()`**:
	* Pros: Faster than `concat()` due to Lodash's optimized implementation.
	* Cons: Requires the Lodash library, adds extra dependencies.
3. **Spread Operator (`...`)**:
	* Pros: Fast, efficient, and modern.
	* Cons: Only works in modern browsers (ECMAScript 2015+).
4. **Cached for Loop (`push.apply()`)**:
	* Pros: Can be more memory-efficient than `concat()` due to pushing elements onto an existing array.
	* Cons: Slower than the other approaches, and less readable.

**Library and Special JS Features**

In this benchmark, Lodash is used as a library to provide the `concat()` function. There are no special JS features or syntax mentioned in the test cases.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few:

1. **`Array.prototype.push()` with `splice()`**: Instead of using `push.apply()`, you can use `splice()` to insert elements into an existing array.
2. **`slice()` and `concat()`**: Another approach is to use `slice()` to create a shallow copy of one array, concatenate it with another array using `concat()`, and then assign the result back to the original array.

Keep in mind that these alternatives might have different performance characteristics or trade-offs, so it's essential to test them for your specific use case.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Lodash concat

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