Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array push vs Spread
(version: 0)
Comparing performance of:
A: push vs B: Spread
Created:
6 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var list = Array.from({ length: 1000 }).map((_, i) => `Item ${i + 1}`);
Tests:
A: push
var newList = []; list.forEach(item => newList.push(item));
B: Spread
var newList = []; list.forEach(item => newList = [ ...newList, item ]);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
A: push
B: Spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Browser/OS:
Chrome 133 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=586992" width="100%" height="500px"></iframe>
A: push
120K/s
B: Spread
3K/s
View exact numbers
Test name
Executions per second
✓
A: push
119,916 Ops/sec
B: Spread
3,000 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net! The provided benchmark measures the performance difference between two approaches to add elements to an array in JavaScript: 1. Using `Array.prototype.push()` 2. Using the spread operator (`...`) with assignment (`newList = [ ...newList, item ]`) **Options compared:** * **Push vs Spread**: Two different methods for adding elements to an array. + Pros of Push: - Widely supported and well-established method. - Efficient in most cases. + Cons of Push: - Can lead to poor cache locality due to frequent resizing of the internal array. - May be slower for large arrays or deep arrays (due to repeated reallocations). + Pros of Spread: - Modern and efficient way of adding elements to an array. - Avoids resizing issues and provides better cache locality. + Cons of Spread: - Requires support for the spread operator (`...`) in older browsers and Node.js versions. **Other considerations:** * **Array concatenation**: Another approach that can be considered, but it's generally slower than push or spread due to creating a new array. * **Using `Array.prototype.splice()`**: While not directly related to adding elements at the end of an array, `splice()` is often used for inserting elements, which can lead to similar performance issues as pushing. **Library and special JS feature:** There's no specific library or advanced JavaScript feature mentioned in this benchmark. The focus is on comparing two basic approaches to manipulate arrays in JavaScript. **Explanation of the spread operator (`...`):** The spread operator is a relatively new addition to the JavaScript language, introduced in ECMAScript 2015 (ES6). It allows you to expand an array or other iterable into individual elements, which can be used as arguments for a function or assigned to a new variable. In this benchmark, the spread operator is used with assignment (`newList = [ ...newList, item ];`) to create a new array by appending `item` to the existing `newList`. **Benchmark preparation code:** The script preparation code creates an array `list` with 1000 elements using `Array.from()` and `map()`. This is done to provide a common starting point for both test cases. **Individual test cases:** There are two individual test cases: 1. **Push**: Creates a new empty array `newList` and uses `forEach()` to push each element from `list` onto `newList`. 2. **Spread**: Creates a new empty array `newList` and uses `forEach()` to assign each element from `list` to `newList`, using the spread operator with assignment. **Latest benchmark result:** The latest results show that Chrome 81 on Desktop (Mac OS X 10.14.6) executes **push** approximately 67423 times per second, while executing **spread** approximately 1527 times per second. This suggests that push is currently faster than the spread approach in this specific test case. Keep in mind that benchmark results may vary depending on the specific environment and browser version used. **Other alternatives:** If you're looking for alternative approaches to adding elements to an array, consider: * **Array concatenation**: Creating a new array by concatenating existing arrays using `push()` or the spread operator. * **Using `Array.prototype.splice()`**: Inserting or replacing elements in an array using `splice()`, which can lead to similar performance issues as pushing. However, these alternatives are generally slower than using `push` or the spread operator.
Related benchmarks
Arrays: spread operator vs push
Javascript string to array mapping: Array.from() vs Spread syntax [...spread]
Pushing items via Array.push vs. Spread Operator
Comments
Confirm delete:
Do you really want to delete benchmark?