Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Concat vs Prototype Push vs Push Spread vs Spread
(version: 0)
Benchmark.js
Comparing performance of:
concat vs prototype push vs push spread vs spread
Created:
6 years ago
by:
Guest
Go to the latest result
Tests:
concat
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); arr1 = arr1.concat(arr2);
prototype push
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); Array.prototype.push.apply(arr1,arr2);
push spread
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); arr1.push(...arr2);
spread
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); arr1 = [...arr1, ...arr2]
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
concat
prototype push
push spread
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; rv:133.0) Gecko/20100101 Firefox/133.0
Browser/OS:
Firefox 133 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=574930" width="100%" height="500px"></iframe>
concat
42K/s
prototype push
34K/s
push spread
34K/s
spread
18K/s
View exact numbers
Test name
Executions per second
✓
concat
42,296 Ops/sec
prototype push
34,232 Ops/sec
push spread
34,187 Ops/sec
spread
18,125 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 benchmark being tested is the performance difference between three ways to concatenate or add elements to an array: `concat`, `prototype push`, and two variations using spread operators (`push spread` and `spread`). We'll explore each approach, their pros and cons, and other considerations. **1. Concat** ```javascript arr1 = arr1.concat(arr2); ``` The `concat()` method creates a new array by concatenating the elements of `arr1` and `arr2`. It returns a new array object, leaving both original arrays unchanged. Pros: * Simple and straightforward to use. * Creates a new array, which can be beneficial for performance-critical applications. Cons: * Requires an extra memory allocation, as it creates a new array. * May incur additional overhead due to the creation of a new array object. **2. Prototype Push** ```javascript Array.prototype.push.apply(arr1, arr2); ``` The `push()` method adds one or more elements to the end of an array and returns the updated length of the array. By using `apply()`, we pass `arr1` as the receiver, allowing us to add elements to its own array. Pros: * Uses existing memory allocation for `arr1`. * Reduces memory overhead compared to concatenation. * Faster than concatenation due to the reuse of existing memory. Cons: * Can be confusing for those who are not familiar with prototype methods or `apply()`. * May not work as expected if `arr1` is already full (i.e., has no available space). **3. Push Spread** ```javascript arr1.push(...arr2); ``` The spread operator (`...`) allows us to expand the elements of `arr2` into individual arguments for the `push()` method. Pros: * Simple and easy to read. * Reduces memory overhead compared to concatenation or prototype push. Cons: * Only supported in modern browsers (ECMAScript 2018+) that implement the spread operator. * May not work as expected if `arr1` is already full (i.e., has no available space). **4. Spread** ```javascript arr1 = [...arr1, ...arr2]; ``` The spread operator (`...`) allows us to expand the elements of both arrays into a new array. Pros: * Simple and easy to read. * Reduces memory overhead compared to concatenation or prototype push. * Works in modern browsers that implement the spread operator. Cons: * Only supported in modern browsers (ECMAScript 2018+) that implement the spread operator. * May be slower than prototype push due to the creation of a new array. Other considerations: * Modern browsers often have performance optimizations for arrays and their methods, so benchmark results may vary depending on the browser and version used. * The number of elements in `arr1` and `arr2` can significantly impact performance. For example, increasing the size of `arr2` from 5000 to 50,000 might change the relative performance of each approach. To create a benchmark like this on MeasureThat.net, you would: 1. Create an account on MeasureThat.net. 2. Fill out the benchmark definition form with your chosen script preparation code and HTML preparation code (usually empty). 3. Add individual test cases for each approach using the `Benchmark Definition` section. 4. Configure the test settings to run multiple executions per second. 5. Run the benchmark and compare the results. Keep in mind that MeasureThat.net is primarily intended for testing JavaScript microbenchmarks, so you may want to use a different tool or framework if your specific requirements involve other programming languages or more complex benchmarks.
Related benchmarks
Array spread vs. push performance
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push for single values
Array.prototype.concat vs spread operator (fix)
Comments
Confirm delete:
Do you really want to delete benchmark?