Benchmark: Array.prototype.concat vs spread operator v4

Tests:

Array.prototype.concat
var array = [ "hello", true, 7 ]; var params = [ "goodbye", false, 8 ]; var extraParams = [ "another one", null, 9 ]; var merged = array.concat(params).concat(extraParams);
spread operator
var array = [ "hello", true, 7 ]; var params = [ "goodbye", false, 8 ]; var extraParams = [ "another one", null, 9 ]; var merged = [...[ ...array, ...params ], ...extraParams];

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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark.

**What is tested?**

The benchmark compares two approaches for concatenating arrays in JavaScript:

1. **`Array.prototype.concat()`**: This method concatenates two or more arrays and returns a new array with the concatenated elements.
2. **ES6 spread operator (`...`)**: This operator allows you to create a new array by spreading (expanding) existing arrays or other iterable objects.

**Options compared**

The benchmark tests both options:

* `Array.prototype.concat()`
* ES6 spread operator (`...`)

**Pros and Cons of each approach:**

1. **`Array.prototype.concat()`**
	* Pros:
		+ Well-known, widely supported method.
		+ Can handle arrays of arbitrary size.
	* Cons:
		+ Creates a new array object with the concatenated elements.
		+ May involve more memory allocation and copying than other approaches.
2. **ES6 spread operator (`...`)**
	* Pros:
		+ More concise and expressive syntax.
		+ Can handle arrays of arbitrary size without creating intermediate objects.
	* Cons:
		+ Not all browsers support the ES6 spread operator (although most do).
		+ May be slower than `concat()` for very large arrays.

**Library/Extensions:**

None

**Special JS features/Syntax:**

The benchmark uses the ES6 spread operator (`...`), which is a relatively new feature introduced in ECMAScript 2015. It's supported in most modern JavaScript environments, but not all older browsers may support it.

**Other alternatives:**

Before the spread operator was introduced, developers often used the following alternative approach:

```javascript
function concat(...arrays) {
    let result = [];
    for (let array of arrays) {
        result.push(...array);
    }
    return result;
}

var merged = concat(array, params, extraParams);
```

This approach is similar to `Array.prototype.concat()`, but it's more verbose and may be slower due to the overhead of creating a function.

Keep in mind that the performance difference between these approaches can vary depending on the specific use case, array size, and JavaScript environment.

Related benchmarks:

Array.prototype.concat vs spread operator v4 (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>

Fastest: N/A

Slowest: N/A

No previous run results

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