Benchmark: Array.prototype.concat vs spread operator v5

Tests:

Array.prototype.concat
var array = [ "hello", true, 7 ]; var params = [ "goodbye", false, 8 ]; var extraParams = [ "another one", null, 9 ]; var merged = array.concat(params,extraParams);
spread operator
var array = [ "hello", true, 7 ]; var params = [ "goodbye", false, 8 ]; var extraParams = [ "another one", null, 9 ]; var merged = [...array, ...params , ...extraParams];

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: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 YaBrowser/24.4.0.0 Safari/537.36

Browser/OS: Yandex Browser 24 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8289534.0 Ops/sec
spread operator	26244286.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, compared, and some pros/cons of different approaches.

**What is tested?**

The benchmark compares two ways to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`: This method concatenates two or more arrays and returns a new array.
2. The spread operator (`...`): This operator allows you to expand an array into individual elements, which can be used to concatenate arrays.

**Options compared**

The benchmark compares the performance of these two approaches in two test cases:

1. **Test Case 1**: Concatenation using `Array.prototype.concat()`.
2. **Test Case 2**: Concatenation using the spread operator (`...`).

**Pros and Cons of each approach:**

1. `Array.prototype.concat()`:
	* Pros:
		+ Well-established method with good performance.
		+ Can handle large arrays efficiently.
	* Cons:
		+ May not be as efficient for small arrays or when using modern JavaScript features like the spread operator.
2. Spread Operator (`...`):
	* Pros:
		+ More concise and readable syntax.
		+ Can handle any iterable (not just arrays).
	* Cons:
		+ May have overhead due to the need to parse the array elements.
		+ Performance may vary depending on the JavaScript engine and browser.

**Library used**

In this benchmark, there is no explicit library mentioned. However, the spread operator (`...`) is a built-in feature of modern JavaScript, introduced in ECMAScript 2015 (ES6).

**Special JS feature or syntax**

The spread operator (`...`) is a new syntax introduced in ES6, which allows you to expand an array into individual elements. This syntax was not available in older versions of JavaScript and may require some explanation for users without knowledge of modern JavaScript features.

**Other alternatives**

In theory, other methods could be used for concatenation, such as:

1. `Array.prototype.push()`: Adding elements to the end of an array using `push()` instead of concatenating.
2. `Array.prototype splice()`: Modifying an array by adding new elements at a specified index.
3. Using a custom function or library for concatenation.

However, these methods may not be as efficient or readable as the `Array.prototype.concat()` method or the spread operator (`...`).

Now that we've broken down the benchmark, let's take a look at the test results:

The latest benchmark result shows that the spread operator (`...`) has better performance than `Array.prototype.concat()`. This may be due to various factors, such as the JavaScript engine used by the browser or the specific implementation of the `concat()` method.

Related benchmarks:

Array.prototype.concat vs spread operator v5 (version: 1)

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

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

Created: 6 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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