Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push for single values
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push for single values
Comparing performance of:
Array.prototype.concat vs spread operator vs Push
Created:
4 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
var value = 7; var arr = [1, 2];
Tests:
Array.prototype.concat
const other = arr.concat(value);
spread operator
const other = [ ...arr, value ];
Push
const other = [ 1, 2 ].push(value);
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:
6 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Browser/OS:
Chrome 138 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=624668" width="100%" height="500px"></iframe>
Push
61.3M/s
spread operator
47.0M/s
Array.prototype.concat
9.1M/s
View exact numbers
Test name
Executions per second
✓
Push
61,320,372 Ops/sec
spread operator
46,969,416 Ops/sec
Array.prototype.concat
9,101,756 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Explanation** The provided JSON represents a JavaScript microbenchmark that compares the performance of three methods for adding a single value to an array: `Array.prototype.concat()`, the spread operator (`[ ... ]`), and the `push()` method. **Options Compared** 1. **Array.prototype.concat()**: This is a traditional method for concatenating arrays in JavaScript. It creates a new array by copying all elements from the original array and then appends the new value to the end of the new array. 2. **Spread Operator (`[ ... ]`)**: This is a new feature introduced in ES6 that allows you to spread elements of an iterable (such as an array) into a new array. In this benchmark, it's used to add a single value to an existing array by spreading the existing array and then appending the new value. 3. **Push() method**: This method adds one or more elements to the end of an array without creating a new array. **Pros and Cons** * **Array.prototype.concat()**: + Pros: Simple and widely supported, but can be slow for large arrays due to the overhead of creating a new array. + Cons: Creates a new array, which can lead to performance issues if dealing with very large arrays. * **Spread Operator (`[ ... ]`)**: + Pros: Fast and memory-efficient, as it only creates a new array reference without actually copying the elements. + Cons: Requires support for ES6 features, and some older browsers or environments might not execute it correctly. * **Push() method**: + Pros: Fast and efficient, as it only modifies the existing array by adding a new element to the end. + Cons: May be slower than the spread operator if dealing with very large arrays due to potential cache misses. **Library and Special JS Feature** In this benchmark, there is no library or special JavaScript feature being used beyond the standard ECMAScript features. The tests only rely on the built-in `Array` prototype methods. No special JavaScript features like `async/await`, `let`, `const`, etc., are mentioned in the provided code snippets. **Other Alternatives** If you're looking for alternative approaches, consider the following: * Using a library like Lodash, which provides a `concat` function that can be faster and more efficient than the built-in method. * Implementing a custom concatenation function using a loop or recursion to avoid creating new arrays. * Utilizing a specialized array library like ArrayStream or Ramda for array operations. Keep in mind that these alternatives might come with additional overhead, dependencies, or trade-offs, so it's essential to evaluate their suitability based on your specific use case and performance requirements.
Related benchmarks
Array.prototype.concat vs spread operator
Array spread vs. push performance
concat 2 arrays: Array.prototype.concat vs spread operator
Comments
Confirm delete:
Do you really want to delete benchmark?