Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Pushing items via Array.push vs. Spread Operator
(version: 0)
Comparing performance of:
Traditional push vs Spread push
Created:
5 years ago
by:
Guest
Go to the latest result
Tests:
Traditional push
let a = []; let b = [1, 2, 3]; b.forEach(item => a.push(item));
Spread push
let a = [] let b = [1, 2, 3] a.push(...b);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Traditional push
Spread push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
11 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:142.0) Gecko/20100101 Firefox/142.0
Browser/OS:
Firefox 142 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=616043" width="100%" height="500px"></iframe>
Traditional push
18.4M/s
Spread push
15.7M/s
View exact numbers
Test name
Executions per second
✓
Traditional push
18,362,872 Ops/sec
Spread push
15,678,321 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 is designed to test the performance difference between two approaches: using the traditional `Array.push()` method versus the spread operator (`...`) to push items onto an array. **Traditional Push** -------------------- In this approach, the `forEach()` method is used to iterate over the elements of the original array `b`, and each item is pushed onto a new empty array `a` using the `push()` method. This creates a new array element for each iteration, resulting in a linear increase in memory allocation. **Pros:** * Easy to understand and implement * Works on older browsers that may not support the spread operator **Cons:** * Creates multiple array elements, leading to increased memory allocation and potentially slower performance **Spread Push** ----------------- In this approach, the `push()` method is used with the spread operator (`...`) to push all elements of the original array `b` onto a new empty array `a`. This creates only one new array element, reducing memory allocation compared to traditional `push()`. **Pros:** * More efficient memory allocation * Potentially faster performance **Cons:** * May not work in older browsers that do not support the spread operator * Can be less intuitive for some developers Now, let's take a closer look at the library used in this benchmark. There is no specific library mentioned in the provided code or JSON. However, it is likely that the `Array.prototype.forEach()` method and the spread operator (`...`) are part of the JavaScript standard library. The test case uses special JavaScript syntax: the spread operator (`...`). This was introduced in ECMAScript 2015 (ES6) as a way to create a new array from an existing array or other iterable objects. It is supported by most modern browsers and Node.js environments. Now, let's discuss alternative approaches: 1. **Using `Array.prototype.concat()`**: Instead of using the spread operator, you could use the `concat()` method to merge the two arrays. This would create a new array element for each iteration, similar to traditional `push()`. 2. **Using `Array.prototype.slice()`**: You could also use the `slice()` method to create a shallow copy of the original array and then push its elements onto the target array. 3. **Using a custom loop**: If you prefer not to use built-in methods like `forEach()` or `push()`, you could write a custom loop to iterate over the elements of the original array and push them onto the target array. Keep in mind that these alternative approaches may have different performance characteristics compared to using the spread operator or traditional `push()`.
Related benchmarks
Arrays: spread operator vs push
Comments
Confirm delete:
Do you really want to delete benchmark?