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: 20 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5.2 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

spread operator

53.9M/s

Array.prototype.concat

52.2M/s

lodash concat

11.9M/s

View exact numbers

Test name	Executions per second
✓ spread operator	53,863,464 Ops/sec
Array.prototype.concat	52,205,736 Ops/sec
lodash concat	11,899,352 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).

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

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

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

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

Related benchmarks

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