Benchmark: Array.prototype.concat vs spread operator vs lodash concat

HTML Preparation code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Script Preparation code:

var a = [1, 2, 3]
var b = [4, 5, 6]

Tests:

Array.prototype.concat
var c = a.concat(b);
spread operator
var c = [...a, ...b]
lodash concat
var c = _.concat(a, b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
lodash concat

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	10658915.0 Ops/sec
spread operator	31308338.0 Ops/sec
lodash concat	4995652.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmarking test that compares three approaches to concatenate two arrays: `Array.prototype.concat`, the spread operator (`...`), and `_lodash.concat`. The test aims to measure the performance of each approach on an array of length 3, which contains values 1, 2, and 3.

**Options being compared**

There are three options being compared:

1. **`Array.prototype.concat"`**: This is a built-in JavaScript method that concatenates two arrays and returns a new array.
	* Pros: Simple and straightforward implementation. Suitable for most use cases.
	* Cons: May have overhead due to the method call, and it creates a new array, which might not be desirable in memory-constrained environments.
2. **`Spread operator (`...`)`**: This is a new JavaScript feature introduced in ES6 that allows you to expand an iterable (like an array) into individual elements.
	* Pros: Efficient and concise implementation. No overhead due to method calls or array creation.
	* Cons: Only supported in modern browsers and Node.js environments. May not work in older browsers or environments.
3. **`_lodash.concat"`**: This is a function from the Lodash library that concatenates two arrays and returns a new array.
	* Pros: Robust implementation with various options for customizing behavior. Suitable for complex use cases.
	* Cons: Adds extra overhead due to the library import and its internal logic.

**Library used**

In this test, the Lodash library is used as a third-party dependency. `_lodash.concat` is a function that concatenates two arrays and returns a new array.

**Special JS feature or syntax**

None of the individual test cases use special JavaScript features or syntax beyond what's required for the benchmarking itself (e.g., using `var`, `const`, etc.). However, it's worth noting that the spread operator (`...`) is a relatively new feature introduced in ES6, which may not be supported in older browsers or environments.

**Other alternatives**

Some other alternatives to these approaches could include:

* Using `Array.prototype.push()` and assigning the result back to the original array
* Using `slice()` and concatenating arrays manually
* Implementing a custom concatenation function from scratch

However, these alternatives would likely be less efficient and more verbose than using `Array.prototype.concat`, the spread operator, or `_lodash.concat`.

**Benchmark preparation code**

The provided script preparation code creates two sample arrays `a` and `b` with values 1, 2, and 3. The HTML preparation code includes a link to the Lodash library.

**Individual test cases**

Each individual test case defines a specific benchmarking scenario using one of the three approaches:

1. **`Array.prototype.concat"`**: Concatenates arrays `a` and `b` using `concat()`.
2. **`Spread operator (`...`)```**: Expands arrays `a` and `b` into individual elements using the spread operator.
3. **`_lodash.concat"`**: Concatenates arrays `a` and `b` using the `_lodash.concat()` function from Lodash.

These test cases are executed in a loop, allowing the benchmark to measure the performance of each approach under various conditions (e.g., multiple executions per second).

Related benchmarks:

Array.prototype.concat vs spread operator vs lodash concat (version: 0)

Compare the new ES6 spread operator vs Array.prototype.concat vs _.concat

Comparing performance of: Array.prototype.concat vs spread operator vs lodash concat

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

lodash concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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