Benchmark: Array.prototype.concat vs spread operator with more numbers

Tests:

Array.prototype.concat
var first = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] var second = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] var other = first.concat(second);
spread operator
var first = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] var second = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] var other = [ ...first, ...second ]

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: 6 years ago)

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

Browser/OS: Chrome 67 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4465487.0 Ops/sec
spread operator	4266745.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark compares two approaches for concatenating arrays in JavaScript: the traditional `Array.prototype.concat()` method and the new ES6 spread operator (`[ ... ]`).

**Options Compared**

1. **Traditional `concat()` method**: This is a built-in method on the Array prototype that creates a new array by appending all elements from one or more source arrays.
2. **Spread Operator (`[ ... ]`)**: This is a syntax feature introduced in ES6 that allows you to spread the elements of an array into another array.

**Pros and Cons**

* **Traditional `concat()` method**:
	+ Pros: widely supported, well-documented, and familiar to many developers.
	+ Cons: creates a new array, which can lead to memory overhead for large arrays.
* **Spread Operator (`[ ... ]`)**:
	+ Pros: more concise, efficient (as it doesn't create a new array), and easier to read.
	+ Cons: requires modern JavaScript version support and may not work in older browsers.

**Library/Tool Used**

None. This benchmark is testing pure JavaScript code.

**Special JS Feature/Syntax**

The spread operator (`[ ... ]`) is a feature introduced in ES6 (ECMAScript 2015). It allows you to spread the elements of an array into another array, as shown in the benchmark's second test case.

**Other Alternatives**

If you need to concatenate arrays in older JavaScript versions or browsers that don't support the spread operator, you can use other approaches, such as:

* `Array.prototype.push()`: adding each element from one array to another using `push()`.
* `Array.prototype.splice()`: modifying an existing array by removing elements and then inserting new elements from another array.
* Using a library like Lodash, which provides a `concat` function that can be used for concatenating arrays.

It's worth noting that modern JavaScript versions (ES6+ and beyond) and most modern browsers support the spread operator, making it a convenient and efficient choice for concatenating arrays.

Related benchmarks:

Array.prototype.concat vs spread operator with more numbers (version: 0)

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