Benchmark: Add new element to array - unshift vs destructuring

Tests:

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

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 runs

spread operator

55.1M/s

Unshift

20.2M/s

Fastest: spread operator (2.7x faster)

View exact numbers

✓ spread operator: 55,058,848 ops/sec
• Unshift: 20,176,782 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
Unshift

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Browser/OS: Chrome 143 on Windows

View result in a separate tab

spread operator

46.6M/s

Unshift

23.0M/s

View exact numbers

Test name	Executions per second
✓ spread operator	46,643,896 Ops/sec
Unshift	23,007,780 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 benchmark and explain what's being tested, the options compared, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark is defined by a JSON object that describes the test case:

```
"Name": "Add new element to array - unshift vs destructuring",
"Description": "Comparing performance of: spread operator vs Push"
```

In this case, the benchmark is comparing the performance of two approaches for adding a new element to an array:

1. **Destructuring spread operator (`...params`)**
2. **`unshift()` method**

**Options Compared**

The options being compared are:

* Destructuring spread operator (`...params`)
* `unshift()` method

**Pros and Cons of Each Approach:**

### 1. Destructuring Spread Operator (`...params`)

Pros:

* Concise and readable syntax
* Fast execution, as it avoids creating a new array object
* Works with arrays of any type (not just numbers or strings)

Cons:

* May not be as efficient as `unshift()` for large arrays
* Can be slower due to the creation of a temporary array object

### 2. `unshift()` method

Pros:

* Fast execution, as it uses native implementation
* Works with large arrays without creating intermediate objects
* Supports various types of data (arrays, objects, etc.)

Cons:

* Requires an existing array object, which can be slower to create
* Less readable syntax for some developers

**Library and Purpose**

There is no specific library mentioned in the benchmark definition. However, if we look at the individual test cases, we see that `params` is an array variable defined as `[ "hello", true, 7 ]`.

The purpose of `params` seems to be a simple example array for demonstration purposes. There is no actual library being used here.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax mentioned in the benchmark definition. However, it's worth noting that destructuring spread operator was introduced in ECMAScript 2015 (ES6) and has become a standard feature in modern JavaScript.

**Other Considerations**

* The benchmark is likely using a simple array for demonstration purposes.
* The performance difference between `unshift()` and the destructuring spread operator may not be significant for small arrays, but it's still worth considering when optimizing performance-critical code.
* If you need to add elements to an array frequently, using the `unshift()` method might be more efficient than creating a new array object with the spread operator.

**Alternatives**

If you're looking for alternative approaches to adding elements to an array, consider:

* Using `concat()`: This method creates a new array object and returns it. It's slower than `unshift()` but works well when you need to combine multiple arrays.
* Using `push()`: Similar to `concat()`, this method adds an element to the end of the array and returns the length of the updated array. However, it can be less efficient for large arrays due to the creation of intermediate objects.
* Using a native library like `Array.prototype.reduce()` or `Array.prototype.forEach()`: These methods offer more control over iteration and data processing but might not be suitable for simple array operations.

Keep in mind that performance optimization should always be done with attention to the specific use case, code readability, and maintainability.

Add new element to array - unshift vs destructuring (version: 0) Benchmark.js

Comparing performance of: spread operator vs Push

Comparing performance of: `spread operator vs Unshift`

Created: 3 years ago by: Guest

Go to the latest result

spread operator

Unshift

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 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 - unshift vs destructuring (version: 0) Benchmark.js

Comparing performance of: spread operator vs Push

Comparing performance of: spread operator vs Unshift

Created: 3 years ago by: Guest

Go to the latest result

spread operator

Unshift

Historical Performance Data aggregated from 26 community runs

Desktop Results:

Chrome 26 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 Unshift`