Benchmark: concat vs lodash.concat 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);
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

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of four different approaches to concatenate two arrays in JavaScript:

1. `Array.prototype.concat()`
2. Lodash's `concat()` function
3. The spread operator (`...`)
4. A cached for loop with push

**Options Compared**

Each option is compared in terms of its execution speed, measured in executions per second.

**Pros and Cons of Each Approach**

* **`Array.prototype.concat()`**: This method is the most traditional way to concatenate arrays in JavaScript. It creates a new array by copying elements from both input arrays. The pros are that it's widely supported and easy to understand. However, the cons are that it can be slow for large arrays due to the overhead of creating a new array.
* **Lodash's `concat()` function**: Lodash is a popular utility library that provides many useful functions. In this case, its `concat()` function is faster than the built-in `Array.prototype.concat()`. The pros are that it's optimized and can be faster for large arrays. However, the cons are that it requires including an external library.
* **Spread operator (`...`)**: This is a relatively new feature in JavaScript (introduced in ES6) that allows you to create a new array by spreading elements from an existing array. The pros are that it's concise and easy to read. However, the cons are that it may not be supported in older browsers or versions of Node.js.
* **Cached for loop with push**: This approach uses a loop to iterate over one array and push its elements onto another array. The pros are that it can be faster than the other approaches for small arrays due to the overhead of function calls. However, the cons are that it's not as concise or readable as some of the other options.

**Library Usage**

In this benchmark, Lodash is used in conjunction with the spread operator (`...`) and `push()` method to provide a way to concatenate two arrays. The `concat()` function from Lodash is also included in the benchmark for comparison.

**Special JavaScript Features or Syntax**

The spread operator (`...`) is a relatively new feature in JavaScript that allows you to create a new array by spreading elements from an existing array. It's used in option 3 of the benchmark. This feature was introduced in ES6 and is widely supported in modern browsers and versions of Node.js.

**Alternatives**

Other approaches to concatenate arrays in JavaScript include:

* Using `Array.prototype.reduce()` or `Array.prototype.forEach()`
* Creating a new array using an array literal (`[...arr1, ...arr2]`)
* Using a library like Ramda or Immutable.js

However, these alternatives may not be as concise or readable as some of the options included in this benchmark.

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/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3870400.8 Ops/sec
Lodash concat	1629474.1 Ops/sec
spread operator	5894800.5 Ops/sec
cached for + push	720268.8 Ops/sec

Related benchmarks:

concat vs lodash.concat vs. spread operator vs. push in for loop (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 one month ago):