Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator - with Arrays of Objects (Updated Oct 2020)
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method
Comparing performance of:
Array.prototype.concat vs spread operator (spread at head) vs spread operator (spread at tail)
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
var params = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; var other = [ { 'one': 1 }, { 'two': 2 } ].concat(params);
spread operator (spread at head)
var params = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; var other = [ ...params, { 'one': 1 }, { 'two': 2 } ];
spread operator (spread at tail)
var params = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; var other = [ { 'one': 1 }, { 'two': 2 }, ...params ];
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 (spread at head)
spread operator (spread at tail)
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, including the provided benchmark: "Array.prototype.concat vs spread operator - with Arrays of Objects" (Updated Oct 2020). **Tested Options** The benchmark compares three different approaches for concatenating two arrays in JavaScript: 1. **`Array.prototype.concat()`**: The traditional method using the `concat()` method. 2. **Spread Operator at Head (`...params`)**: Using the spread operator to add elements to the beginning of the array. 3. **Spread Operator at Tail (`...params`)**: Using the spread operator to add elements to the end of the array. **Pros and Cons of Each Approach** 1. **`Array.prototype.concat()`**: * Pros: + Most widely supported and well-documented method. + Can be used with arrays of any type, not just objects. * Cons: + Less efficient than spread operators in modern browsers. 2. **Spread Operator at Head (`...params`)**: * Pros: + Can be faster than `concat()` when the spread operator is implemented efficiently by the browser engine. * Cons: + Less widely supported and less well-documented than `concat()`. 3. **Spread Operator at Tail (`...params`)**: * Pros: + Also can be faster than `concat()` under similar circumstances as spread at head. * Cons: + Similar to spread at head, less widely supported and less well-documented. **Libraries Used** None of the benchmark definitions explicitly use any external libraries. However, it's worth noting that modern browsers have built-in support for the spread operator, which was introduced in ECMAScript 2018 (ES2018). **Special JavaScript Features/Syntax** * The spread operator (`...`), introduced in ECMAScript 2015 (ES2015), allows elements to be added to an array or object without using `concat()` or other methods. * Modern browsers, including Chrome Mobile iOS 102, have implemented the spread operator efficiently, making it a viable alternative to `concat()`. **Other Alternatives** In addition to the three approaches tested in this benchmark: 1. **`Array.prototype.push()`**: Adding elements to the end of an array using `push()`. 2. **`Array.prototype.unshift()`**: Adding elements to the beginning of an array using `unshift()`. 3. **Other library functions**, such as Lodash's `concat()` or Immutable.js's `concat()`, may also be used for concatenating arrays. Keep in mind that these alternatives are not part of the standard JavaScript API and may have different performance characteristics compared to the tested options.
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (new try)
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator on large array
Array.prototype.concat vs spread operator on small array
Comments
Confirm delete:
Do you really want to delete benchmark?