Benchmark: spread vs push vs unshift

Tests:

spread
var params = [ "hello", true, 7 ]; params = [ ...params, "444"];
push
var params = [ "hello", true, 7 ] params.push("444");
unshift
var params = [ "hello", true, 7 ] params.unshift("444");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
push
unshift

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread	48102764.0 Ops/sec
push	73840808.0 Ops/sec
unshift	22981824.0 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 JSON and explain what's being tested.

**Overview**

The test compares three different ways to add an element to an array in JavaScript: the traditional `push` method, the new ES6 spread operator (`...`), and the `unshift` method. The benchmark is designed to measure which approach performs better in terms of execution speed.

**Options Compared**

1. **Push**: This is the traditional way of adding an element to an array. It modifies the original array by appending a new element to its end.
2. **Spread Operator (`...`)**: Introduced in ES6, this operator creates a new array from the elements of an existing array and adds the specified element(s) to it.
3. **Unshift**: This method inserts one or more elements at the beginning of an array.

**Pros and Cons**

* **Push**:
	+ Pros: Simple, widely supported, and efficient for large arrays.
	+ Cons: Modifies the original array, which can be undesirable in some cases.
* **Spread Operator (`...`)**:
	+ Pros: Creates a new array, which can help preserve the original array's state. Also, it allows for more flexibility when adding elements to an array.
	+ Cons: May incur additional memory allocation and copying overhead due to creating a new array.
* **Unshift**:
	+ Pros: Inserts elements at the beginning of an array, which can be useful in certain scenarios (e.g., inserting items at the top of a stack).
	+ Cons: Less efficient than `push` for large arrays, as it requires shifting all existing elements to make room for the new ones.

**Libraries and Special Features**

None mentioned in this benchmark.

**Other Considerations**

* The test only measures execution speed, so other factors like memory allocation or array copying overhead are not considered.
* The test uses a desktop browser (Chrome 105) on Windows, which may impact results due to differences in hardware, operating system, and browser version.

**Alternatives**

If you want to explore alternative approaches or libraries for adding elements to an array, consider the following options:

* **Array.prototype.splice()**: This method replaces elements at a specified index with new values. It can be more efficient than `push` for smaller arrays.
* **Array.prototype.reduce()**: This method applies a reduction function to all elements of an array, accumulating a result. While not directly related to adding elements, it can be used to create a new array while preserving the original's state.
* **Libraries like Lodash or Ramda**: These popular JavaScript libraries offer functions for working with arrays, such as `lodash.push()` or `ramda.unshift()`, which might provide additional features or optimizations not available in native JavaScript methods.

Related benchmarks:

spread vs push vs unshift (version: 0)

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

Comparing performance of: spread vs push vs unshift

Created: 5 years ago by: Guest

Jump to the latest result

spread

push

unshift

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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