Benchmark: Array concat vs spread operator

Script Preparation code:

var arr1 = ["what", "is", "this"];
var arr2 = ["this", "is", "a", "test", "hello", "how", "are", "you", "today"];

Tests:

Array.prototype.concat
var result = arr1.concat(arr2);
spread operator
var result = [...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: 3 years ago)

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

Browser/OS: Chrome 87 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	2368957.0 Ops/sec
spread operator	3699802.8 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 benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two ways to concatenate arrays in JavaScript: `Array.prototype.concat` and the spread operator (`...`). The script preparation code defines two sample arrays, `arr1` and `arr2`, which are used to test these two approaches.

**Options Compared**

Two options are being compared:

1. **Array.prototype.concat**: This method creates a new array by copying elements from one or more source arrays.
2. **Spread Operator (`...`)**: This syntax allows you to create a new array by spreading elements from an existing array.

**Pros and Cons of Each Approach**

**Array.prototype.concat**:

Pros:

* Well-established, widely supported, and efficient
* Can be used with multiple source arrays

Cons:

* Creates a new array object, which can lead to increased memory usage
* May not perform as well for very large input sizes

**Spread Operator (`...`)**:

Pros:

* Creates a new array without the need for an explicit method call
* More concise and readable
* Can be used with arrays and other iterable sources (e.g., strings)

Cons:

* Not supported in older browsers or environments that don't have modern JavaScript features
* May not perform as well as `Array.prototype.concat` for very large input sizes

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Performance: If you're working with large datasets, `Array.prototype.concat` might be a better choice. However, if readability and conciseness are more important, the spread operator is a good option.
* Browser support: If you need to support older browsers or environments that don't have modern JavaScript features, you may want to use `Array.prototype.concat`.

**Library Usage**

There is no explicit library used in this benchmark. However, it's worth noting that some libraries (e.g., Lodash) provide optimized implementations of array concatenation methods.

**Special JS Features/Syntax**

The benchmark uses the spread operator (`...`), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). While most modern browsers support this syntax, older browsers or environments may not.

Related benchmarks:

Array concat vs spread operator (version: 0)

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

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