Benchmark: Add new element to array: push vs destructuring - long and short

Tests:

spread operator
var params = [ "hello", true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10, ] var other = [ ...params, 'new' ]
short spread
var params = [ "hello", true, 7 ]; var other = [ ...params, 'new' ]
short push
var params = [ "hello", true, 7 ]; params.push('new');
push
var params = [ "hello", true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10,true, 7,1,2,3,4,5,6,7,8,9,10, ] params.push('new');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
short spread
short push
push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for adding an element to an array:

1. **Spread operator**: Using the spread operator (`...`) to add elements to an existing array.
2. **Short push**: Pushing a single element onto the end of an existing array using the `push()` method.
3. **Push**: Similar to short push, but pushing multiple elements onto the end of an existing array.

**Testing**

The benchmark measures the execution time for each approach on different browsers and devices. The latest results show that:

* Short push is the fastest approach (approx. 3600 executions per second).
* Spread operator is slightly slower than short push (approx. 4500 executions per second).
* Push (including multiple elements) is the slowest approach (approx. 3600-3800 executions per second).

**Observations**

The results suggest that using the spread operator and short push are faster than traditional `push()` because they don't require a separate method call, which incurs additional overhead.

However, it's essential to note that these results might depend on specific use cases, JavaScript engines, and browser versions. Additionally, while speed is an important consideration, other factors like code readability and maintainability should also be taken into account when choosing between these approaches.

**Code Comparison**

Here's a simple example of how each approach would look in JavaScript:
```javascript
// Spread operator
const arr = [1, 2];
arr.push(...[3, 4]); // using spread operator

// Short push
const arr = [1, 2];
arr.push(3); // short push

// Push (traditional)
const arr = [1, 2];
arr.push(3); // traditional push
```
In summary, the benchmark suggests that using the spread operator and short push can be faster than traditional `push()` for adding elements to an array. However, the choice of approach ultimately depends on specific use cases and personal preference.

Related benchmarks:

Add new element to array: push vs destructuring - long and short (version: 0)

Comparing performance of: spread operator vs short spread vs short push vs push

Created: 4 years ago by: Guest

Jump to the latest result

spread operator

short spread

short push

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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