Benchmark: Array concat vs spread operator vs push spread vs push

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push with spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
Push without spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(params[0], params[1], params[2]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push with spread
Push without spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	17637186.0 Ops/sec
spread operator	63621356.0 Ops/sec
Push with spread	80463104.0 Ops/sec
Push without spread	80453360.0 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 world of JavaScript microbenchmarks!

**What is being tested?**

MeasureThat.net is comparing four ways to concatenate an array in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `push()` with the spread operator (`...`)

These methods are compared for their performance on various browsers and devices.

**Options being compared:**

The comparison focuses on the following options:

* Using `concat()` to concatenate an array
* Using the spread operator (`...`) to concatenate an array
* Using `push()` with the spread operator (`...`) to add elements to an array

**Pros and Cons of each approach:**

1. **`Array.prototype.concat()`**: This is a traditional way of concatenating arrays in JavaScript. It creates a new array and copies all elements from both arrays into it.
	* Pros: Well-established, easy to understand
	* Cons: Creates a new array, can be slower due to memory allocation
2. **Spread operator (`...`)**: This is a modern way of concatenating arrays introduced in ES6. It uses the spread syntax to concatenate an array.
	* Pros: More concise, faster than `concat()` (since it doesn't create a new array)
	* Cons: Requires knowledge of the spread operator syntax
3. **`push()` with spread operator (`...`)**: This method uses the spread operator to add elements to an existing array using the `push()` method.
	* Pros: More concise, faster than concatenating and then pushing (since it avoids creating a new array)
	* Cons: Requires knowledge of the spread operator syntax

**Library usage:**

None of the test cases use any libraries.

**Special JS feature or syntax:**

The spread operator (`...`) is used in three out of four test cases. It's a modern JavaScript feature introduced in ES6, which allows for concise array concatenation and spreading of arrays into new arrays.

**Alternatives:**

Other alternatives to concatenate arrays include:

* Using `Array.prototype.slice()` to create a shallow copy of an array
* Using `array.push(...)` to add elements to an existing array (without the spread operator)
* Using `array.concat(array2)` to concatenate two arrays

However, these methods may have performance implications or require additional memory allocations, making the spread operator and `push()` with spread operator potentially more efficient.

Related benchmarks:

Array concat vs spread operator vs push spread vs push (version: 1)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push with spread vs Push without spread

Created: one year ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push with spread

Push without spread

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