Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Array spread operator vs push, large list
(version: 0)
Benchmark.js
Comparing performance of:
spread vs push
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.startArray = []; for (let i = 0; i < 100; i++) { startArray.push("El-" + i); }
Tests:
spread
startArray.reduce((accumulator, currentValue) => { return [...accumulator, currentValue]; }, []);
push
startArray.reduce((accumulator, currentValue) => { accumulator.push(currentValue); return accumulator; }, []);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
spread
push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 OPR/131.0.0.0
Browser/OS:
Opera 131 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=629392" width="100%" height="500px"></iframe>
push
5.0M/s
spread
197K/s
View exact numbers
Test name
Executions per second
✓
push
5,012,608 Ops/sec
spread
196,643 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what is being tested. **Benchmark Purpose** The benchmark is designed to compare two approaches for manipulating arrays in JavaScript: using the spread operator (`[...]`) and using the `push()` method. **Approaches Compared** There are two test cases: 1. **Push**: This approach uses the `push()` method to add elements to an array. 2. **Spread**: This approach uses the spread operator (`[...]`) to create a new array by spreading the existing array. **Pros and Cons of Each Approach** * **Push**: + Pros: Efficient for adding a single element to an array, as it only requires one operation. + Cons: Inefficient for large arrays, as it requires multiple operations (each adding an element) and can lead to performance issues due to frequent array resizing. * **Spread**: + Pros: Efficient for large arrays, as it creates a new array by copying all elements from the original array in one operation. + Cons: Less efficient for small arrays or when only adding a single element, as it involves additional overhead (creating a new array and iterating over elements). **Library Used** There is no explicit library mentioned in the benchmark definition. However, it's likely that a built-in JavaScript function or method is being used. **Special JS Feature or Syntax** The use of the spread operator (`[...]`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for creating new arrays by spreading existing arrays or values into them. **Other Considerations** * The benchmark uses a large array of 100 elements to simulate real-world scenarios. * The `reduce()` method is used as a utility function to combine the two approaches, allowing for direct comparison between them. **Alternatives** If alternative approaches were to be considered, some options might include: 1. Using `concat()`: Another way to create a new array by concatenating existing arrays or values into it. 2. Using a custom implementation: Writing a custom loop to iterate over the elements and add them to the array. 3. Using a different data structure: Alternatives like linked lists, trees, or other data structures that might be more efficient for certain operations. However, these alternatives are not explicitly mentioned in the benchmark definition, and the use of `push()` and the spread operator is likely due to their simplicity, efficiency, and widespread adoption in modern JavaScript codebases.
Related benchmarks
Pushing items via Array.push vs. Spread Operator
Array.push vs Spread operator
Push vs LHS spread
Comments
Confirm delete:
Do you really want to delete benchmark?