Benchmark: Array concat vs. array spread

Tests:

Array concat
const arr = [1, 2, 3]; const res = arr.concat(4);
spread operator (appended)
const arr = [1, 2, 3]; const res = [...arr, 4];
spread operator (prepended)
const arr = [1, 2, 3]; const res = [0, ...arr];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array concat
spread operator (appended)
spread operator (prepended)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 86 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array concat	3920731.2 Ops/sec
spread operator (appended)	25489778.0 Ops/sec
spread operator (prepended)	28009278.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided JSON represents a benchmark test on MeasureThat.net, which compares three approaches to concatenate arrays in JavaScript:

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

These approaches are compared using three individual test cases.

**Test Case 1: Array concat**

```javascript
const arr = [1, 2, 3];
const res = arr.concat(4);
```

This test case uses the traditional `concat()` method to concatenate an array `[1, 2, 3]` with a new element `4`. The resulting concatenated array is stored in `res`.

**Pros and Cons of Array concat**

* **Pros:**
	+ Wide browser support (has been around for decades)
	+ Simple and intuitive syntax
* **Cons:**
	+ Can be slower than other approaches due to its method call overhead

**Test Case 2: Spread operator (appended)**

```javascript
const arr = [1, 2, 3];
const res = [...arr, 4];
```

This test case uses the spread operator (`...`) to concatenate an array `[1, 2, 3]` with a new element `4`. The resulting concatenated array is stored in `res`.

**Pros and Cons of Spread operator (appended)**

* **Pros:**
	+ Faster than traditional `concat()` due to its syntax optimization
	+ More concise and modern syntax
* **Cons:**
	+ Requires ES6+ support (not supported in older browsers)
	+ May not work as expected if the spread expression is used incorrectly

**Test Case 3: Spread operator (prepended)**

```javascript
const arr = [1, 2, 3];
const res = [0, ...arr];
```

This test case uses the spread operator (`...`) to prepend an element `0` to an array `[1, 2, 3]`. The resulting prepended array is stored in `res`.

**Pros and Cons of Spread operator (prepended)**

* **Pros:**
	+ Similar benefits as the appended variant (faster and more concise syntax)
	+ Works with any type of spread expression
* **Cons:**
	+ Less intuitive syntax than traditional `concat()` or appending variant

**Library Used**

In this benchmark, no specific JavaScript library is used. The test cases only use built-in JavaScript features.

**Special JS Features/Syntax**

The ES6 spread operator (`...`) is a special feature introduced in ECMAScript 2015 (ES6). It allows for concise and expressive array concatenation and manipulation. However, it requires modern browser support and may not work as expected in older browsers or environments with limited JavaScript capabilities.

**Other Alternatives**

In addition to the traditional `concat()` method and spread operator approaches, there are other ways to concatenate arrays in JavaScript:

* Using `Array.prototype.push()`: `arr.push(4)`
* Using a loop: `for (let i = 0; i < arr.length; i++) { arr[i] = 4 }`
* Using the `Array.from()` method: `const res = Array.from(arr, () => 4)`

Related benchmarks:

Array concat vs. array spread (version: 0)

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

Comparing performance of: Array concat vs spread operator (appended) vs spread operator (prepended)

Created: 4 years ago by: Guest

Jump to the latest result

Array concat

spread operator (appended)

spread operator (prepended)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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