Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
speed test: concat vs spread vs push BdB
(version: 0)
Benchmark.js
Comparing performance of:
concat vs push vs spread
Created:
4 years ago
by:
Guest
Go to the latest result
Tests:
concat
let array1 = []; const array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1 = array1.concat(array2);
push
const array1 = []; const array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1.push(...array2);
spread
let array1 = []; const array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1 = [...array1, ...array2];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
concat
push
spread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 18_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 18 on iOS 18.0.1
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=577139" width="100%" height="500px"></iframe>
spread
64.7M/s
concat
37.9M/s
push
23.4M/s
View exact numbers
Test name
Executions per second
✓
spread
64,675,644 Ops/sec
concat
37,911,440 Ops/sec
push
23,434,042 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. **Benchmark Overview** The provided benchmark is designed to compare the performance of three different approaches for concatenating arrays in JavaScript: 1. `concat()` 2. Spread syntax (`...`) 3. `push()` with array spreading These methods are commonly used in JavaScript to combine arrays, but their performance can vary depending on the specific use case. **Options Compared** Here's a brief overview of each option and its pros and cons: 1. **`concat()`**: This method creates a new array by copying elements from an existing array and adding new elements. * Pros: Simple and straightforward, works well for small arrays. * Cons: Creates a new array, which can lead to memory allocation overhead. 2. **Spread syntax (`...`)**: This syntax uses the spread operator to create a new array by taking elements from another array. * Pros: Efficient, creates a new array with minimal overhead, and is compatible with most browsers. * Cons: May be less intuitive for some developers, requires JavaScript version 3.8+. 3. **`push()` with array spreading**: This method uses the `push()` method to add elements to an existing array and then spreads the newly added elements onto the original array using the spread operator (`...`). * Pros: Efficient, creates a new array with minimal overhead, similar to spread syntax but may be slightly slower. * Cons: May be less intuitive for some developers, requires JavaScript version 3.8+. **Library and Special JS Features** None of these benchmarks use any external libraries or special JavaScript features beyond the standard language syntax. **Other Considerations** When choosing between these methods, consider the following factors: * **Memory allocation overhead**: If you're working with large arrays, creating a new array using `concat()` might lead to significant memory allocation overhead. Spread syntax and `push()` with array spreading are generally more efficient in this regard. * **Browser compatibility**: If you need to support older browsers, you may want to avoid using spread syntax or `push()` with array spreading, as they require JavaScript version 3.8+. **Benchmark Results** The provided benchmark results show that: * `concat()` is the slowest option, likely due to its memory allocation overhead. * Spread syntax and `push()` with array spreading are very close in performance, with spread syntax being slightly faster. Keep in mind that these results may vary depending on your specific use case, JavaScript version, and browser environment. **Alternatives** If you're interested in exploring other options for concatenating arrays, consider the following alternatives: * **`Array.prototype.concat()`**: This method is similar to `concat()`, but it takes an array as an argument instead of returning a new array. * **`Array.prototype.push.apply()`**: This method uses `push()` with array spreading (similar to `push()` with `...`) but applies it to the entire array at once. * **Native array concatenation methods** (e.g., `concat()`, `push()`, and spread syntax): These methods may have different performance characteristics depending on your JavaScript version and browser environment. I hope this explanation helps you understand the benchmark results and choose the best approach for your specific use case!
Related benchmarks
Large Array concat vs spread operator vs push
Array concat vs spread operator vs push with large arrays
Comments
Confirm delete:
Do you really want to delete benchmark?