Benchmark: Add multiple elements to array: push vs destructuring

Tests:

spread operator
var params = [ "hello", true, 7 ] const newVals = ["first", "second"] var other = [ ...params, ...newVals ]
Push
var params = [ "hello", true, 7 ]; const newVals = ["first", "second"] params.push(...newVals);

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Push

62.0M/s

spread operator

38.4M/s

Fastest: Push (1.6x faster)

View exact numbers

✓ Push: 61,991,908 ops/sec
• spread operator: 38,395,524 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: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Mac OS X 10.15.7

View result in a separate tab

Push

77.0M/s

spread operator

55.0M/s

View exact numbers

Test name	Executions per second
✓ Push	77,039,736 Ops/sec
spread operator	54,975,268 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark and its components.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark compares two approaches for adding elements to an array: using the spread operator (destructuring) versus using the `push` method.

**What is being tested?**

In this benchmark, we're testing how efficient different methods are for adding multiple elements to an array in JavaScript. Specifically, we're comparing:

1. **Spread Operator (Destructuring)**: This approach uses the spread operator (`...`) to create a new array by copying elements from an existing array (`params`).
2. **Push**: This approach uses the `push` method to add elements to the end of the `params` array.

**Options compared**

The benchmark is comparing two options:

1. Spread Operator (Destructuring)
2. Push

Each option has its own pros and cons:

* **Spread Operator (Destructuring)**:
	+ Pros: efficient, concise way to create a new array by copying elements from an existing array.
	+ Cons: may not be supported in older browsers or versions of JavaScript.
* **Push**:
	+ Pros: widely supported across different browsers and versions of JavaScript.
	+ Cons: less concise than the spread operator, can lead to slower performance due to method call overhead.

**Library usage**

In this benchmark, there is no library being used explicitly. However, some libraries might be enabled by default or through environment variables (e.g., `useES6` flag).

**Special JS feature/syntax**

There's no specific special JavaScript feature or syntax being tested in this benchmark. It's focused on comparing two approaches for adding elements to an array.

**Other alternatives**

If you were to create a similar benchmark, other alternatives might include:

1. Using `concat` instead of the spread operator.
2. Using `slice` and then assigning the result back to the original array.
3. Using a loop to add elements to the array.

However, these alternatives are not being tested in this specific benchmark.

**Benchmark preparation code**

The provided JavaScript code sets up the benchmark by creating two arrays: `params` and `newVals`. The `push` approach modifies the `params` array directly, while the spread operator creates a new array (`other`) by copying elements from both `params` and `newVals`.

Overall, this benchmark provides a simple yet useful comparison of different approaches for adding elements to an array in JavaScript.

Add multiple elements 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 5 community runs

Desktop 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 multiple elements 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 5 community runs

Desktop 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`