Benchmark: Array concat vs spread operator 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
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 23 hours ago)

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	19782462.0 Ops/sec
spread operator	59111728.0 Ops/sec
Push	69159488.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.

**What is being tested?**

The provided benchmark compares three different ways to concatenate or push elements onto an array in JavaScript:

1. **`Array.prototype.concat()`**: The traditional way to concatenate two arrays using the `concat()` method.
2. **Spread Operator (`...`)**: The new ES6 spread operator, introduced in ECMAScript 2015, which allows for more concise and expressive array creation.
3. **`Array.prototype.push()` with spread syntax (`...`)**: A way to push elements onto an array using the `push()` method with the spread operator.

**Options being compared**

The benchmark is comparing these three options on the same input data:

* `params`: An array containing a string, a boolean, and a number.
* The arrays `other` are created by concatenating or pushing `params` onto them.

**Pros and Cons of each approach:**

1. **`Array.prototype.concat()`**:
	* Pros: Well-established, widely supported, and easy to understand.
	* Cons: Can be less efficient than other methods, as it creates a new array object.
2. **Spread Operator (`...`)**:
	* Pros: More concise, expressive, and efficient than `concat()`, especially for large arrays.
	* Cons: Introduced in ES6, may not be supported by older browsers or versions of Node.js.
3. **`Array.prototype.push()` with spread syntax (`...`)**:
	* Pros: Similar to the spread operator, but with a more traditional approach to array manipulation.
	* Cons: Requires an additional step (using `push()`) and may not be as efficient as the spread operator.

**Other considerations**

* The benchmark results are likely influenced by the specific JavaScript engine and platform used (e.g., Chrome 129 on Linux).
* Other factors, such as input data size and complexity, can impact the performance of these methods.
* Modern JavaScript engines often have optimizations for array operations, which may affect the results.

**Library and special JS features**

None are mentioned in this specific benchmark. However, it's worth noting that other libraries or frameworks might use different approaches to array manipulation or provide additional features that could impact performance.

Now, if you'd like to know about some alternative ways to concatenate arrays in JavaScript, here are a few:

* **`Array.prototype.reduce()`**: Can be used to concatenate arrays by defining a custom reduce function.
* **`Array.prototype.map()` with `...`**: Can be used to push elements onto an array using the spread operator.

These alternatives might be worth exploring in different scenarios or for specific use cases.

Related benchmarks:

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

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

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

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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