Benchmark: JavaScript spread operator vs Array.concat performance

Tests:

Using spread operator
const array1 = [1, 2, 3, 4, 5] const array2 = [6, 7, 8, 9, 10] const finalArray = [ ...array1, ...array2 ]
Using Array.concat
const array1 = [1, 2, 3, 4, 5] const array2 = [6, 7, 8, 9, 10] const finalArray = array1.concat(array2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using spread operator
Using Array.concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 15 on iOS 15.4

View result in a separate tab

Test name	Executions per second
Using spread operator	324855072.0 Ops/sec
Using Array.concat	13762200.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 benchmark.

**What is being tested?**

The benchmark tests two approaches to merging two arrays in JavaScript:

1. Using the spread operator (`...`).
2. Using `Array.concat()`.

In each test case, we have an initial array `array1` and another array `array2`. The final result should be a new array containing all elements from both original arrays. We're comparing the performance of these two methods in creating this new array.

**Options compared**

The two options being compared are:

* **Using spread operator (`...`)**: This is a modern JavaScript feature that allows you to expand an array into multiple arguments, similar to `apply()` or `concat()`. When used with the syntax `[...array1, ...array2]`, it creates a new array containing all elements from both input arrays.
* **Using `Array.concat()`**: This method takes two or more arrays as arguments and returns a new array containing all elements from those arrays. In this case, we're passing `array1` and `array2` to the `concat()` method.

**Pros and Cons**

**Using spread operator (`...`)**

Pros:

* More concise and expressive code
* Can be faster in some cases due to reduced overhead of creating a new array (see [issue 14397](https://github.com/TC39/ecma262/issues/14397) in the ECMAScript specification)
* Often preferred for its readability and brevity

Cons:

* Not supported in older browsers or JavaScript engines
* Can be slower in very large datasets due to the overhead of creating a new array (see [issue 14397](https://github.com/TC39/ecma262/issues/14397) in the ECMAScript specification)

**Using `Array.concat()`**

Pros:

* Widely supported across older browsers and JavaScript engines
* Can be faster in very large datasets due to less overhead when creating a new array

Cons:

* More verbose code compared to using the spread operator
* May not be as readable or concise

**Library usage**

There is no explicit library mentioned in the benchmark definition, but we can assume that the `Array` object and its methods (e.g., `concat()`) are part of the built-in JavaScript API.

**Special JS feature**

There is no special JavaScript feature or syntax used in this benchmark. It only relies on standard JavaScript language features and APIs.

**Other alternatives**

If you wanted to create a new array by merging two arrays, other alternatives could include:

* `Array.prototype.reduce()` (although this might be less efficient due to the overhead of function calls)
* Using a library like Lodash or Ramda for array manipulation
* Manual loop-based approach using `push()` and indexing

However, for simple cases like this one, the spread operator or `concat()` method are usually the most straightforward and performant choices.

Related benchmarks:

JavaScript spread operator vs Array.concat performance (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Using spread operator

Using Array.concat

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):