Benchmark: Concat vs Spread (Two Arrays)

Script Preparation code:

var array1 = [ "hella", true, 7 ]
var array2 = ["hallo", false, 5];

Tests:

spread operator
var other = [ ...array1, ...array2 ]
concat into empty array
var final = array1.concat(array2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
concat into empty array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

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

Browser/OS: Chrome 139 on Windows

View result in a separate tab

Test name	Executions per second
spread operator	38492340.0 Ops/sec
concat into empty array	13796088.0 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 world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition and Purpose**

The provided JSON represents a benchmark that compares two approaches for concatenating arrays: the traditional `concat()` method and the new ES6 spread operator (`...`). The purpose of this benchmark is to determine which approach is faster in JavaScript.

**Options Compared**

There are two test cases:

1. **Spread Operator (`[ ...array1, ...array2 ]`)**: This option uses the spread operator to concatenate `array1` and `array2`. It's a concise way to create a new array by copying elements from an existing array.
2. **Concat into Empty Array (`var final = array1.concat(array2)`)**: This option concatenates `array1` and `array2` using the `concat()` method, which creates a new array by copying elements from each input array.

**Pros and Cons**

* **Spread Operator**: Pros:
	+ Concise and expressive syntax.
	+ Creates a new array without modifying the original arrays.
	Cons:
	+ Can be slower in older browsers or with large inputs due to the overhead of creating a new array.
* **Concat into Empty Array**: Pros:
	+ Often faster than the spread operator, especially for small inputs, since it avoids creating a new array.
	+ Wide browser support, including older versions.
Cons:
	+ Less concise syntax, which can make code harder to read.

**Library and Purpose (None in this case)**

There are no external libraries used in this benchmark. The tests rely solely on built-in JavaScript features.

**Special JS Feature or Syntax (Spread Operator)**

The spread operator (`[ ...array1, ...array2 ]`) is a new feature introduced in ECMAScript 2015 (ES6). It allows you to create a new array by copying elements from an existing array. This syntax was not available in older versions of JavaScript.

**Other Alternatives**

If you need to concatenate arrays, there are other approaches:

* Using `Array.prototype.push()`: `array1.push(...array2);`
* Creating a new array using the `Array.from()` method: `Array.from(array1).concat(Array.from(array2))`

Keep in mind that these alternatives may have different performance characteristics compared to the spread operator and the concat() method.

I hope this explanation helps you understand the benchmark and its options!

Related benchmarks:

Concat vs Spread (Two Arrays) (version: 0)

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

Comparing performance of: spread operator vs concat into empty array

Created: 6 years ago by: Guest

Jump to the latest result

spread operator

concat into empty array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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