Benchmark: Add new element to array: push vs destructuring

Tests:

spread operator
var params = [ "hello", true, 7 ] var other = [ ...params, 'new' ]
Push
var params = [ "hello", true, 7 ]; params.push('new');

Historical Performance Data aggregated from 269 community runs

Desktop Results:

Chrome 224 runs

Push

63.2M/s

spread operator

42.3M/s

Fastest: Push (1.5x faster)

View exact numbers

✓ Push: 63,179,480 ops/sec
• spread operator: 42,274,252 ops/sec

Firefox 27 runs

Push

103.5M/s

spread operator

22.3M/s

Fastest: Push (4.6x faster)

View exact numbers

✓ Push: 103,491,104 ops/sec
• spread operator: 22,327,386 ops/sec

Safari 13 runs

spread operator

464.6M/s

Push

25.5M/s

Fastest: spread operator (18.2x faster)

View exact numbers

✓ spread operator: 464,593,856 ops/sec
• Push: 25,475,544 ops/sec

Mobile Results:

Chrome 5 runs

Push

24.5M/s

spread operator

15.1M/s

Fastest: Push (1.6x faster)

View exact numbers

✓ Push: 24,472,432 ops/sec
• spread operator: 15,090,715 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Ubuntu

View result in a separate tab

Push

77.4M/s

spread operator

10.6M/s

View exact numbers

Test name	Executions per second
✓ Push	77,385,928 Ops/sec
spread operator	10,605,792 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**Benchmark Purpose:**
The goal of this benchmark is to compare the performance of two approaches for adding a new element to an array in JavaScript:

1. Using the `push()` method (e.g., `params.push('new')`)
2. Using the spread operator (e.g., `[...params, 'new']`)

**Options Compared:**

* **Push Method**: This is a traditional way of appending elements to an array by calling the `push()` method.
	+ Pros:
		- Well-established and widely supported syntax
		- Easy to read and write
	+ Cons:
		- May incur additional overhead due to function call
		- May not be as efficient as other methods for large arrays
* **Spread Operator**: This is a more modern way of spreading elements into an array using the spread operator (`...`).
	+ Pros:
		- More concise and expressive syntax
		- Can be faster than `push()` for large arrays
		- Allows for easier creation of new arrays with multiple sources
	+ Cons:
		- May require more effort to understand and implement correctly

**Other Considerations:**

* The benchmark also tests the performance of JavaScript engines across different browsers, devices, and operating systems.
* The test cases are designed to be simple and representative of common use cases.

**Library Used:**
None. This benchmark is pure JavaScript, without any external libraries or dependencies.

**Special JS Feature/Syntax:**
The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for more concise and expressive array creation and manipulation.

**Benchmark Preparation Code:**
The provided JSON defines two test cases:

1. "spread operator" - This test case uses the spread operator to create a new array by spreading elements from `params` and appending `'new'`.
2. "Push" - This test case uses the traditional `push()` method to append `'new'` to the end of the `params` array.

**Benchmark Results:**
The latest benchmark results show that:

* The "Push" test case executed approximately 259,963,622 times per second on Chrome 129 on a Linux desktop.
* The "spread operator" test case executed approximately 35,613,676 times per second on the same configuration.

Overall, these results suggest that the spread operator may be faster than the traditional `push()` method for this specific benchmark, but it's essential to consider the specific use case and JavaScript engine being used.

Add new element to array: push vs destructuring (version: 0)

Comparing performance of: `spread operator vs Push`

Created: 5 years ago by: Guest

Go to the latest result

spread operator

Push

Historical Performance Data aggregated from 269 community runs

Desktop Results:

Chrome 224 runs

Firefox 27 runs

Safari 13 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Add new element to array: push vs destructuring (version: 0)

Comparing performance of: spread operator vs Push

Created: 5 years ago by: Guest

Go to the latest result

spread operator

Push

Historical Performance Data aggregated from 269 community runs

Desktop Results:

Chrome 224 runs

Firefox 27 runs

Safari 13 runs

Mobile Results:

Chrome 5 runs

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: `spread operator vs Push`