Benchmark: Array.prototype.concat vs spread operator multiple arrays

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 params2 = [ "hello", true, 7 ]; var params3 = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params).concat(params2).concat(params3);
spread operator
var params = [ "hello", true, 7 ] var params2 = [ "hello", true, 7 ]; var params3 = [ "hello", true, 7 ]; var other = [ 1, 2, ...params, ...params2, ...params3 ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

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 break down the benchmark and its components.

**Benchmark Overview**

The benchmark, titled "Array.prototype.concat vs spread operator multiple arrays", compares two approaches to concatenate multiple arrays in JavaScript:

1. The traditional `concat()` method
2. The new ES6 spread operator (`...`)

**Options Compared**

The two options being compared are:

* `Array.prototype.concat()`: a built-in method that concatenates one or more arrays.
* Spread operator (`...`): a new syntax introduced in ES6 that allows for "splatting" arrays into new arrays.

**Pros and Cons of Each Approach**

**Concat Method:**

Pros:

* Wide browser support (all modern browsers)
* Easy to use and understand
* Can handle any number of arrays

Cons:

* Performance can be slower compared to spread operator
* Creates a new array, which may not be desirable in some cases

**Spread Operator:**

Pros:

* Faster performance compared to concat method
* More concise and expressive syntax
* Supports multiple arrays being concatenated with a single expression

Cons:

* Requires modern JavaScript versions (ES6+)
* May not work as expected if used outside of array concatenation contexts

**Library Used**

The benchmark uses the `lodash` library, which is included in the HTML preparation code. Lodash provides utility functions for various tasks, including array manipulation.

In this specific case, the `concat()` method is called using `_.chain()`, which returns a new object with the concatenated arrays:

```javascript
var other = _.chain([ 1, 2 ]).concat(params).concat(params2).concat(params3);
```

**Special JS Feature or Syntax**

The benchmark uses the spread operator (`...`) to concatenate multiple arrays. This feature was introduced in ES6 and allows for "splatting" arrays into new arrays.

```javascript
var other = [1, 2, ...params, ...params2, ...params3];
```

**Other Alternatives**

If you need to concatenate arrays without using the `concat()` method or spread operator, you can also use other approaches such as:

* Using the `Array.prototype.push()` method in a loop:
```javascript
var other = [];
for (var i = 0; i < params.length; i++) {
  other.push(params[i]);
}
```
or
```javascript
var other = [];
for (var i = 0; i < params2.length; i++) {
  other.push(params2[i]);
}
for (var i = 0; i < params3.length; i++) {
  other.push(params3[i]);
}
```

These approaches can be slower and less concise than the `concat()` method or spread operator.

Overall, the benchmark provides a useful comparison between two common approaches to array concatenation in JavaScript.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4482348.0 Ops/sec
spread operator	47195204.0 Ops/sec

Related benchmarks:

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

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

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

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

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