Benchmark: Array.prototype.concat vs spread operator on large array

Script Preparation code:

var array = new Array(10000).fill(1)
var toConcat = new Array(5000).fill(2)

Tests:

Array.prototype.concat
var other = array.concat(toConcat);
spread operator
var other = [ ...array, ...toConcat ]

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

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	147925.8 Ops/sec
spread operator	17280.6 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 of the provided benchmark.

**What is being tested?**

The benchmark compares two approaches for concatenating arrays:

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

The test creates a large array `array` with 10,000 elements filled with the value `1`, and another large array `toConcat` with 5,000 elements filled with the value `2`. It then uses these arrays to concatenate them using both methods.

**Options compared**

The benchmark compares two options:

a. **Array.prototype.concat()**: This is a traditional method for concatenating arrays in JavaScript. It creates a new array and copies the elements from both input arrays into it.

b. **Spread operator (`...`)**: This is a new feature introduced in ES6 that allows you to expand an iterable (such as an array) into separate arguments to a function, or to use its elements as individual values in an expression.

**Pros and Cons of each approach**

a. **Array.prototype.concat()**: Pros:

* Well-established and widely supported
* Can be used with any type of object that supports the `concat()` method

Cons:

* Creates a new array, which can lead to increased memory usage
* May not be as efficient as other approaches for very large arrays

b. **Spread operator (`...`)**: Pros:

* More concise and expressive than traditional concatenation methods
* Can be more efficient than creating a new array using `concat()`

Cons:

* Only works with arrays, not with all types of iterables
* May have performance issues if used with very large arrays or complex data structures

**Library usage**

There is no explicit library usage in this benchmark. However, it's worth noting that the spread operator relies on the `Array.prototype` prototype chain, which is a built-in part of JavaScript.

**Special JS feature/syntax**

The benchmark uses the ES6 spread operator (`...`). If you're not familiar with this feature, here's a brief explanation:

When used in an expression, the spread operator allows you to expand an iterable into separate arguments. For example:
```javascript
var array = [1, 2, 3];
var other = [...array, 4, 5]; // creates a new array: [1, 2, 3, 4, 5]
```
In the benchmark, the spread operator is used to concatenate the `toConcat` array with the `array` using the syntax `[ ...array, ...toConcat ]`.

**Other alternatives**

If you're interested in exploring alternative approaches for concatenating arrays, here are a few options:

1. Using `Array.prototype.push()` and passing multiple elements: `array.push(...toConcat)`
2. Using `Array.prototype.concat()` with an array literal: `[...array].concat([...toConcat])`
3. Using a custom implementation that avoids creating a new array or using the spread operator.

Keep in mind that each of these alternatives has its own trade-offs and may not be suitable for all use cases.

Related benchmarks:

Array.prototype.concat vs spread operator on large array (version: 0)

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

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

Created: 2 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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