Benchmark: Array.prototype.push vs spread operator vs flat

Tests:

Array.prototype.push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Array.prototype.flat
var params = [ "hello", true, 7 ]; var other = [1, 2, params].flat()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.push
spread operator
Array.prototype.flat

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/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Array.prototype.push

77.4M/s

spread operator

60.9M/s

Array.prototype.flat

10.1M/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.push	77,431,872 Ops/sec
spread operator	60,918,044 Ops/sec
Array.prototype.flat	10,146,875 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 its components.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for adding elements to an array:

1. `Array.prototype.push()`
2. The new ES6 spread operator (`...`)
3. `Array.prototype.flat()` (note that this method flattens an array of arrays, not just adds elements)

**Options Compared**

The benchmark compares the performance of these three approaches on a sample dataset. The dataset consists of an array with 3 elements: a string, a boolean, and a number.

**Pros and Cons**

1. **`Array.prototype.push()`**: This is the traditional method for adding elements to an array in JavaScript. It's straightforward but can be inefficient if used incorrectly (e.g., when dealing with large arrays).
2. **Spread Operator (`...`)**: The spread operator provides a concise way to add elements to an array. However, it may not be as efficient as `push()` when dealing with very large arrays, since it creates a new array instance.
3. **`Array.prototype.flat()`**: This method flattens an array of arrays into a single array. While it can be used to add elements to an array (by passing the elements as an argument), its primary purpose is not addition.

**Library and Special JS Features**

The benchmark does not use any specific libraries or frameworks, but it relies on JavaScript's built-in `Array` prototype methods (`push()` and `flat()`).

There are no special JavaScript features used in this benchmark (e.g., async/await, generators, closures).

**Other Alternatives**

If you want to add elements to an array, other alternatives might include:

* Using `concat()` instead of `push()`: While `concat()` is also part of the Array prototype, it creates a new array instance and may be less efficient than `push()`.
* Using a library like Lodash's `insertAt()` function: This function provides a more concise way to add elements to an array, but it relies on a external library.
* Using a custom implementation: Depending on your specific requirements, you might consider implementing your own addition method using JavaScript.

**Benchmark Result**

The latest benchmark result shows the execution counts per second for each test case:

| TestName | ExecutionsPerSecond |
| --- | --- |
| `Array.prototype.push()` | 47762372.0 |
| Spread Operator (`...`) | 44929016.0 |
| `Array.prototype.flat()` | 5202483.5 |

The results suggest that the spread operator is slightly faster than `push()`, while `flat()` is the slowest of the three.

Keep in mind that benchmarking results can vary depending on your specific use case, system configuration, and JavaScript engine version.

Array.prototype.push vs spread operator vs flat (version: 0) Benchmark.js

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

Comparing performance of: `Array.prototype.push vs spread operator vs Array.prototype.flat`

Created: 5 years ago by: Guest

Go to the latest result

Array.prototype.push

spread operator

Array.prototype.flat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.push vs spread operator vs flat (version: 0) Benchmark.js

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

Comparing performance of: Array.prototype.push vs spread operator vs Array.prototype.flat

Created: 5 years ago by: Guest

Go to the latest result

Array.prototype.push

spread operator

Array.prototype.flat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.push vs spread operator vs Array.prototype.flat`