Benchmark: Array.prototype.concat vs spread operator Two

HTML Preparation code:

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

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = params.concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ ...params, ...params ]
lodash concat
var params = [ "hello", true, 7 ]; var other = _.concat(params, params);

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

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Definition**

The website is comparing three approaches to concatenate an array of values: `Array.prototype.concat()`, the spread operator (`...`), and a variant using Lodash (`_.concat()`).

**Options compared**

1. **Array.prototype.concat()**: This method creates a new array by concatenating two or more arrays.
2. **Spread operator (`...`)**: This is a new syntax introduced in ECMAScript 2018 that allows for spreading the elements of an iterable (like an array) into a new array.
3. **Lodash concat (`_.concat()`)**: Lodash is a utility library that provides a `concat` function, which concatenates two or more arrays.

**Pros and cons**

1. **Array.prototype.concat()**:
	* Pros: Wide browser support (long-standing method), relatively simple implementation.
	* Cons: Creates a new array on each invocation, can be slower for large datasets.
2. **Spread operator (`...`)**:
	* Pros: Concise syntax, creates a new array without the need for explicit function calls.
	* Cons: Introduced in ECMAScript 2018, might not work in older browsers or environments.
3. **Lodash concat (`_.concat()`)**:
	* Pros: Widely supported (Lodash is a popular utility library), provides additional features like handling null/undefined values and arrays with different lengths.
	* Cons: Adds an external dependency (Lodash), can be slower due to the function call overhead.

**Library usage**

The `lodash.core.js` script is included in the HTML preparation code, which makes Lodash available for use in the benchmark. The `_concat` function from Lodash is used as a third approach for concatenating arrays.

**Special JS features or syntax**

There's no special JavaScript feature or syntax being tested here; it's all about comparing different array concatenation methods.

**Other alternatives**

If you'd like to add more approaches, some other options could include:

* Using `Array.prototype.push()` and setting the length property manually.
* Utilizing a library like `reduce` (e.g., `_.reduce()` from Lodash) for concatenation.
* Comparing the performance of different sorting algorithms before concatenating.

Latest run results:

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

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

Browser/OS: Opera 57 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4789047.5 Ops/sec
spread operator	26172966.0 Ops/sec
lodash concat	1555895.4 Ops/sec

Related benchmarks:

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

Compare the new ES6 spread operator with the traditional concat() method

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

Created: 5 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

lodash concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):