Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array.prototype.concat vs spread operator - merging two Objects Arrays (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 x2 (head and tail)
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
const response = [ { 'hundo': 100 }, { 'nine': 9 }, {'nested': { 'twos': 22 }} ]; const state = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ].concat(response);
spread operator (spread at head)
const response = [ { 'hundo': 100 }, { 'nine': 9 }, {'nested': { 'twos': 22 }} ]; const state = [ ...response, { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ];
spread operator x2 (head and tail)
const prevState = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; const newItems = [ { 'hundo': 100 }, { 'nine': 9 }, {'nested': { 'twos': 22 }} ]; const state = [ ...prevState, ...newItems ];
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 x2 (head and 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):
Let's break down what's being tested in the provided benchmark. **Overview** The benchmark compares two approaches for merging two object arrays: `Array.prototype.concat` and the new ES6 spread operator (`...`). The test aims to determine which approach is faster. **Options compared** There are three test cases: 1. **Array.prototype.concat**: This method takes an array as an argument and returns a new array that contains all elements from both arrays. 2. **Spread operator (spread at head)**: This syntax uses the spread operator (`...`) to create a new array by copying elements from one or more source arrays. In this test case, the spread operator is used with `response` as the first argument and `state` as the second argument. 3. **Spread operator x2 (head and tail)**: This variant of the spread operator uses it twice, once to combine the two input arrays (`prevState` and `newItems`) at the head and once to merge the resulting array with another array (`state`). **Pros and cons** 1. **Array.prototype.concat**: * Pros: Widely supported, easy to understand, and well-documented. * Cons: Can be slower due to the overhead of creating a new array. 2. **Spread operator (spread at head)**: * Pros: Modern, efficient, and often preferred by developers due to its simplicity and expressiveness. * Cons: May not be supported in older browsers or environments that don't have ES6 support. 3. **Spread operator x2 (head and tail)**: * Pros: Can take advantage of the fact that arrays are mutable, allowing for more efficient merging operations. * Cons: Less intuitive than other approaches, and its usage may require careful consideration to avoid unexpected behavior. **Library and purpose** None mentioned in the benchmark definition. However, both `Array.prototype.concat` and the spread operator use native JavaScript functionality. **Special JS feature or syntax** The spread operator (`...`) is a modern JavaScript feature introduced in ES6 (ECMAScript 2015). It allows you to create new arrays by copying elements from existing arrays. **Other alternatives** Before the spread operator, developers often used `Array.prototype.push` and `Array.prototype.concat`, which also merge arrays. However, these approaches can be less efficient due to the overhead of modifying original arrays. The benchmark results show that the **spread operator (spread at head)** is currently the fastest approach on this platform, followed by the **spread operator x2 (head and tail)** variant, and then **Array.prototype.concat**.
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator (fix)
Array.prototype.concat vs spread operator real
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?