Benchmark: Array.prototype.push() VS spread operator

Tests:

Array.prototype.push()
const arr = ["Juan"]; arr.push("Sanchez"); const result = arr
spread operator
let arr = ["Juan"]; arr = [...arr, "Sanchez"]; const result = arr

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.push()
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0

Browser/OS: Firefox 93 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.push()	139373536.0 Ops/sec
spread operator	47852928.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**What is being tested?**

MeasureThat.net is testing two approaches for adding elements to an array:

1. `Array.prototype.push()`: This method modifies the original array by appending one or more elements to its end.
2. Spread operator (`...`): This syntax creates a new array with all elements from the original array, and then adds one or more elements to it.

**Options compared**

The benchmark is comparing two options:

* `Array.prototype.push()`: The traditional method of adding elements to an array using the `push()` method.
* Spread operator (`...`): A concise syntax for creating a new array by spreading elements from an existing array, and then adding more elements to it.

**Pros and cons of each approach**

**Array.prototype.push():**

Pros:

* Native support in most JavaScript engines
* Easy to use and understand
* Optimized performance

Cons:

* Modifies the original array, which can be undesirable if you need to preserve the original data
* Can lead to performance issues if used excessively

**Spread operator (`...`):**

Pros:

* Creates a new array, preserving the original data
* Concise syntax makes it easier to read and write code
* Can improve performance in some cases (see below)

Cons:

* Requires JavaScript engines that support spread syntax (not all do)
* May incur overhead due to array creation

**Performance benefits**

The spread operator can lead to better performance in certain scenarios:

* When adding a large number of elements to an array, the spread operator may be faster because it avoids modifying the original array.
* In modern JavaScript engines, the spread operator is often implemented using optimized algorithms that reduce overhead.

However, this advantage only applies when the number of elements being added is significant. For small arrays or frequent additions, the `push()` method might still be faster due to its optimized implementation.

**Library usage**

Neither of the benchmark test cases uses a library. The spread operator is a native JavaScript syntax introduced in ECMAScript 2015 (ES6).

**Special JS features/syntax**

There are no special JavaScript features or syntax mentioned in this benchmark definition.

**Other alternatives**

If you need to add elements to an array, there are other approaches you could consider:

* `concat()`: A method that creates a new array by concatenating two arrays. While it's not as concise as the spread operator, it can be useful when working with existing arrays.
* `Array.from()`: A static method that creates a new array from an iterable (like an array or string). It can be used to add elements to an array in a more functional programming style.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the spread operator and `push()` method.

Related benchmarks:

Array.prototype.push() VS spread operator (version: 0)

Array.prototype.push() VS spread operator

Comparing performance of: Array.prototype.push() vs spread operator

Created: 3 years ago by: Registered User

Jump to the latest result

Array.prototype.push()

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