Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=505463" width="100%" height="500px"></iframe>
push
850K/s
spread operator
757K/s
View exact numbers
Test name
Executions per second
✓
push
849,993 Ops/sec
spread operator
757,006 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
JavaScript spread operator vs Object.assign performance to merge into new object
JavaScript spread operator vs Object.assign performance - non-destructive merge
Comments
Confirm delete:
Do you really want to delete benchmark?