Benchmark: Array.prototype.concat vs spread operator - small arrays

Script Preparation code:

var arr1 = [];
var arr2 = [];
for(let i = 0; i < 10; i++) {
  arr1.push(i);
  arr2.push(i);
}

Tests:

Array.prototype.concat
[].concat(arr1, arr2);
spread operator
[...arr1, ...arr2];

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: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36

Browser/OS: Chrome 103 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7328071.5 Ops/sec
spread operator	9250332.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark definition compares two approaches for merging arrays: `Array.prototype.concat` (traditional method) and the new ES6 spread operator (`[...]`). The test is designed to measure the performance of these two methods on small arrays.

**Script Preparation Code**

The script preparation code creates two empty arrays, `arr1` and `arr2`, and then populates them with 10 elements using a `for` loop. This ensures that both arrays have an equal number of elements when merged.

**Html Preparation Code**

There is no HTML preparation code specified, which means the benchmark is focused solely on the JavaScript implementation.

**Individual Test Cases**

The benchmark consists of two test cases:

1. **Array.prototype.concat**: This test case uses the traditional `concat` method to merge the two arrays.
2. **spread operator**: This test case uses the new ES6 spread operator (`[...]`) to merge the two arrays.

Now, let's discuss the pros and cons of each approach:

**Array.prototype.concat**

Pros:

* Wide browser support: `concat` has been part of the JavaScript specification since 1999.
* Simple implementation: The method is straightforward to understand and implement.

Cons:

* Performance overhead: `concat` creates a new array object, which can lead to performance issues for large arrays.

**Spread Operator (New ES6 Syntax)**

Pros:

* Concise syntax: The spread operator is a more compact way of merging arrays.
* Efficient implementation: Modern JavaScript engines have optimized implementations of the spread operator, making it faster than `concat`.

Cons:

* Limited browser support: While the spread operator has been part of the JavaScript specification since 2015, older browsers may not have implemented it.

**Library/Function Usage**

In this benchmark, there is no external library or function being used. The test cases only rely on built-in JavaScript methods (`Array.prototype.concat` and the spread operator).

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's been introduced in the latest ES6 specification (2015).

**Alternatives**

Other alternatives for merging arrays include:

* Using `Array.prototype.push()` to append elements to one array, then creating a new array with the desired number of elements.
* Utilizing a library like Lodash, which provides a `concat` function that can be used instead of the built-in method.

Keep in mind that these alternatives may have different performance characteristics and may not be as concise or readable as the spread operator.

Related benchmarks:

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

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

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

Created: 4 years ago by: Registered User

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 2 months ago):