Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array push vs spread operator
(version: 0)
Compare the new ES6 spread operator with the traditional push method
Comparing performance of:
Push vs Spread
Created:
6 years ago
by:
Guest
Go to the latest result
Tests:
Push
var params = [ "hello", true, 7 ] var other = params.push(1);
Spread
var params = [ "hello", true, 7 ] var other = [...params, 1];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Push
Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Browser/OS:
Chrome 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=596572" width="100%" height="500px"></iframe>
Push
71.9M/s
Spread
44.1M/s
View exact numbers
Test name
Executions per second
✓
Push
71,889,272 Ops/sec
Spread
44,123,756 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks! **What is tested?** The provided JSON represents a benchmark test case that compares two approaches to add an element to an array: the traditional `push()` method and the new ES6 spread operator (`...`). The test case measures which approach is faster in terms of executions per second. **Options compared** There are only two options being compared: 1. **Traditional push() method**: This is the classic way to add an element to an array using the `push()` method. 2. **New ES6 spread operator (`...`)**: This is a new syntax introduced in ECMAScript 2015 (ES6) that allows for more concise and expressive array creation. **Pros and Cons of each approach** 1. **Traditional push() method** * Pros: + Wide browser support (has been around since JavaScript 1.0) + Well-established and widely understood syntax * Cons: + Can be slower due to the overhead of calling a method on an array 2. **New ES6 spread operator (`...`)** * Pros: + More concise and expressive syntax, making it easier to create arrays + Potential performance benefits due to optimized JavaScript engines * Cons: + Newer syntax may take time for some browsers to fully support **Library used** None, this test case only uses built-in JavaScript features. **Special JS feature or syntax** The ES6 spread operator (`...`) is a relatively new syntax introduced in ECMAScript 2015 (ES6). It allows for more concise and expressive array creation by spreading elements of an existing array into a new array. **Benchmark preparation code** There is no provided script preparation code, but the test cases themselves demonstrate how to use both approaches: ```javascript // Traditional push() var params = [ "hello", true, 7 ]; var other = params.push(1); // New ES6 spread operator var params = [ "hello", true, 7 ]; var other = [...params, 1]; ``` **Other alternatives** There may be other ways to add an element to an array, such as using `concat()` or creating a new array with `Array.prototype.slice()`. However, these approaches are not being compared in this benchmark test case. Overall, this benchmark test case provides a simple and straightforward way to compare the performance of two different array manipulation methods: traditional `push()` vs. new ES6 spread operator (`...`).
Related benchmarks
Array.prototype.slice vs spread operator With slightly bigger array
Array.prototype.slice vs spread operator on a bigger array
Comments
Confirm delete:
Do you really want to delete benchmark?