Benchmark: Append - Push vs Spread

Tests:

Pushing with spread operator
// Init test case let arr = new Array(1_000); let elemsToPush = new Array(1_000); arr.fill(0); elemsToPush.fill(1); elemsToPush.forEach((e)=>{arr = [...arr,e]});
Pushing with push method
// Init test case let arr = new Array(1_000); let elemsToPush = new Array(1_000); arr.fill(0); elemsToPush.fill(1); elemsToPush.forEach((e)=>arr.push(e));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Pushing with spread operator
Pushing with push method

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Pushing with spread operator	203.7 Ops/sec
Pushing with push method	62632.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript approaches can be a complex task, as it depends on various factors such as browser implementation, device hardware, and JavaScript engine optimizations.

In this benchmark, we're comparing two approaches for pushing elements onto an array:

1. **Push Method**: The `push()` method adds one or more elements to the end of an array.
2. **Spread Operator**: The spread operator (`...`) creates a new array by copying elements from an existing array.

**Push Method**

The push method is a simple and widely used approach for adding elements to an array. In modern JavaScript engines, this method is optimized to be efficient, as it updates the internal array storage directly without creating a new copy of the array.

Pros:

* Wide browser support: The `push()` method is implemented in most modern browsers, ensuring consistent results across different devices.
* Simple and intuitive code: It's easy to understand and use the push method for adding elements to an array.

Cons:

* Potential performance overhead: Creating a new array copy with the spread operator can be slower than using the push method directly on the original array.

**Spread Operator**

The spread operator creates a new array by copying elements from an existing array. This approach can be useful when you need to manipulate arrays without modifying the original array.

Pros:

* Flexibility: The spread operator allows for more flexibility in manipulating arrays, as it creates a new copy that can be modified independently.
* Potential performance benefits: In some cases, using the spread operator can lead to better performance due to the optimization of creating a new array copy.

Cons:

* Performance overhead: Creating a new array copy with the spread operator can introduce additional overhead compared to using the push method directly on the original array.

**Other Considerations**

* **Array.prototype.reduce()**: Another approach for adding elements to an array is using `reduce()` method. While it's not used in this benchmark, it's worth noting that it may offer better performance than both push and spread operator approaches.
* **Native Array methods**: Some browsers provide native methods like `nativeSetLength()` or `nativeSlice()`, which can be used to manipulate arrays without creating a new copy. However, these methods are not widely supported across different devices.

**Benchmark Results**

In this benchmark, the results show that:

* The push method outperforms the spread operator approach in terms of execution speed.
* Safari 17 on Mac OS X 10.15.7 achieves the best performance for both approaches, followed by other browsers and devices.

It's essential to note that these results may vary depending on your specific use case and browser implementation. When writing JavaScript code, it's crucial to consider the trade-offs between different approaches and optimize for performance according to your requirements.

Keep in mind that MeasureThat.net is a specialized platform designed specifically for microbenchmarking JavaScript code. While it provides valuable insights into performance differences, it may not always reflect real-world scenarios or edge cases.

Related benchmarks:

Append - Push vs Spread (version: 0)

Comparing performance of: Pushing with spread operator vs Pushing with push method

Created: 2 years ago by: Guest

Jump to the latest result

Pushing with spread operator

Pushing with push method

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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