Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push with more data
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs spread operator vs Push
Created:
4 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var array1 = [...Array(1000).keys()] var array2 = array1.map(i => i * 10)
Tests:
Array.prototype.concat
const result = array1.concat(array2);
spread operator
const result = [ ...array1, ...array2 ]
Push
const result = array1.push(...array2);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
Push
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; rv:136.0) Gecko/20100101 Firefox/136.0
Browser/OS:
Firefox 136 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=597303" width="100%" height="500px"></iframe>
Array.prototype.concat
265K/s
spread operator
75K/s
Push
33K/s
View exact numbers
Test name
Executions per second
✓
Array.prototype.concat
264,782 Ops/sec
spread operator
75,445 Ops/sec
Push
32,985 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is tested on the provided JSON?** The provided JSON represents a JavaScript microbenchmark test case created using MeasureThat.net. The test compares three approaches for concatenating two arrays: `Array.prototype.concat()`, the spread operator (`...`), and the `push()` method with multiple elements. **Options compared** 1. **Array.prototype.concat**: This method creates a new array by copying all elements from both input arrays. 2. **Spread operator (`...`)**: This operator spreads the elements of an iterable (such as an array) into a new array, allowing for concatenation in a concise way. 3. **Push with multiple elements**: This approach uses `push()` to add elements to the end of an array. **Pros and cons of each approach** 1. **Array.prototype.concat** * Pros: Efficient and widely supported; suitable for large datasets. * Cons: Creates a new array, which can lead to memory allocation issues. 2. **Spread operator (`...`)** * Pros: Concise and expressive; efficient in most cases. * Cons: May be slower than `concat()` due to the creation of an intermediate array; requires modern JavaScript engines. 3. **Push with multiple elements** * Pros: Efficient, as it modifies the original array without creating a new one. * Cons: Requires multiple push() calls for each element, which can lead to slower performance. **Library usage** None in this specific test case. However, if any of these approaches rely on libraries or external dependencies, they would need to be considered in the analysis. **Special JavaScript feature or syntax** The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for concise array concatenation and spreading elements into new arrays. This test case likely relies on this feature to demonstrate its performance compared to traditional methods. **Other alternatives** 1. **Array.prototype.push() with spread operator**: Another way to concatenate arrays is by using `push()` followed by the spread operator: `[...array, ...array2]`. However, this approach still requires multiple push() calls and may not be as efficient as the spread operator alone. 2. **Array.from() method**: Introduced in ECMAScript 2015 (ES6), `Array.from()` can also be used to create a new array from an iterable, but it's less common for concatenation use cases. **Benchmarking considerations** * The test uses MeasureThat.net, which is a popular benchmarking tool specifically designed for JavaScript microbenchmarks. * The test case focuses on comparing the performance of three approaches, ensuring that the results are relevant and comparable. * The use of multiple executions per second (ExecutionsPerSecond) helps to mitigate variations in individual runs and provides a more accurate picture of each approach's performance. By considering these factors, we can gain insights into the relative performance and efficiency of the three array concatenation approaches.
Related benchmarks
concat 2 arrays: Array.prototype.concat vs spread operator
Concat vs Spread (Two Arrays)
Array.prototype.concat vs spread operator on large array
Comments
Confirm delete:
Do you really want to delete benchmark?