Benchmark: A.push(B) V.S. [ ...A, B ]

Script Preparation code:

window.top.tests = {control:[], spread:[]};
window.test = (new Array(10)).fill(null);
window.cutoff = 5000;

Tests:

Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Spread
for (let element of window.test) window.top.tests.spread = [ ...window.top.tests.spread, element ]; if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Spread

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is being tested?**

The provided benchmark tests two approaches to append elements to a large array:

1. **Control (for push)**: This approach uses the `push()` method to add elements to the end of the array.
2. **Spread**: This approach uses the spread operator (`...`) to create a new array with the existing elements and the new element appended.

**Options compared**

The benchmark compares the performance of these two approaches, specifically:

* The number of executions per second (ExecutionsPerSecond) for each browser and device platform.

**Pros and cons of each approach**

1. **Control (for push)**:
	* Pros: This is a more traditional way of appending elements to an array, and it's likely to be familiar to many developers.
	* Cons: The `push()` method can lead to performance issues if the array is very large, as it involves shifting all existing elements down to make room for the new one.
2. **Spread**:
	* Pros: This approach creates a new array with the desired element appended, which can be more efficient than using `push()`.
	* Cons: The spread operator is a relatively recent addition to JavaScript (introduced in ECMAScript 2018), and it may not be supported by older browsers or versions of Node.js.

**Other considerations**

* **Array methods**: Both approaches assume that the array being appended to is an instance of `Array`. If this assumption is not met, unexpected behavior may occur.
* **Browser support**: The benchmark results only provide data for Safari 15 on Mac OS X 10.15.7. Other browsers or versions may exhibit different performance characteristics.

**Library/Functionality**

The spread operator (`...`) uses the `Array.prototype.push()` method under the hood, but it also involves creating a new array with the desired element appended. This is why the `spread` option performs better than the `control` option in this benchmark.

**Special JS feature/syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. It's purely about comparing two different approaches to appending elements to an array.

**Alternatives**

If you want to test other approaches to appending elements to an array, some alternatives could include:

* Using `concat()`, which also creates a new array with the desired element appended.
* Using a for loop with indexing (e.g., `arr[i++] = element;`), which can be more efficient than using `push()` but may be less readable.
* Using a library like Lodash, which provides utility functions for working with arrays.

Overall, this benchmark is a useful tool for understanding the performance implications of different approaches to appending elements to an array in JavaScript.

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/15.4 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Control (for push)	673301.8 Ops/sec
Spread	16786.0 Ops/sec

Related benchmarks:

A.push(B) V.S. [ ...A, B ] (version: 0)

Comparing the various ways to append to a large array

Comparing performance of: Control (for push) vs Spread

Created: 2 years ago by: Guest

Jump to the latest result

Control (for push)

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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