Benchmark: Add new element to array: push vs destructuring with Set

Tests:

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

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 years ago)

User agent: Mozilla/5.0 (Android 13; Mobile; rv:122.0) Gecko/122.0 Firefox/122.0

Browser/OS: Firefox Mobile 122 on Android

View result in a separate tab

Test name	Executions per second
spread operator	757006.4 Ops/sec
push	849993.4 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.

**Benchmark Definition**

The benchmark is defined by a JSON object that describes two test cases: "push" and "spread operator". The benchmark measures which approach (push or spread operator) performs better in terms of execution speed when adding a new element to an array.

**Options Compared**

Two approaches are compared:

1. **Push**: This method involves using the `Array.prototype.push()` method to add a new element to the end of the array.
2. **Spread Operator**: This method uses the spread operator (`...`) to create a new array that includes all elements from the original array, and then adds the new element using `new Set()`.

**Pros and Cons**

* **Push**:
	+ Pros: Simple and straightforward, easy to understand and implement.
	+ Cons: Creates a new copy of the array, which can be inefficient for large arrays.
* **Spread Operator**:
	+ Pros: More efficient than push, as it avoids creating a new copy of the array.
	+ Cons: May be less intuitive for some developers, requires understanding of spread operator and Set objects.

**Library Usage**

The benchmark uses the `Set` object to eliminate duplicate elements from the original array. The `Set` object is used to create a new set that includes all elements from the original array, which then allows for efficient lookup and addition of new elements using the spread operator.

**Special JS Feature/Syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ES6 (ECMAScript 2015). It's used to create a new array or object that includes all elements from an existing array or object. In this benchmark, it's used to create a new set that includes all elements from the original array.

**Other Alternatives**

If push is not considered efficient enough, other alternatives for adding elements to arrays include:

* Using `Array.prototype.unshift()` instead of `push()`.
* Creating a new array using the spread operator and then pushing the new element onto it.
* Using a different data structure, such as an object or Map, that allows for efficient addition of new elements.

However, these alternatives may not provide significant performance improvements over the push method in this specific benchmark case.

Related benchmarks:

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

spread operator vs Push

Comparing performance of: spread operator vs push

Created: 2 years ago by: Guest

Jump to the latest result

spread operator

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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