Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread vs push spread, loop, for of loop
(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 Spread vs Push Loop for of vs Push Loop for
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var subarrs = [ [ "hello", true, 7 ], [ "yes", "no", "maybe", false, 27 ], [ 16, "I", "wonder", "what", "will", "be", "fastest"] ];
Tests:
Array.prototype.concat
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = other.concat(subarrs[i]); } return other;
spread operator
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = [ ...other, ...subarrs[i] ] } return other;
Push Spread
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push(...subarrs[i]); } return other;
Push Loop for of
let other = [ 1, 2, 3 ] for (const sub of subarrs){ for (const item of sub){ other.push(item) } } return other;
Push Loop for
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ for (var jarr = subarrs[i], jen = jarr.length, j = 0; j < jen; j++){ other.push(jarr[j]); } } return other;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (5)
Previous results
Fork
Test case name
Result
Array.prototype.concat
spread operator
Push Spread
Push Loop for of
Push Loop for
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 the provided benchmark and explain what's being tested, compared, and their pros/cons. **Benchmark Purpose** The test case aims to compare the performance of three different methods for concatenating arrays in JavaScript: 1. Using the `concat()` method 2. Using the spread operator (`...`) 3. Using the `push()` method with the spread operator The benchmark is designed to measure the execution time and number of executions per second for each method. **Comparison** Here's a brief overview of each approach: * **Array.prototype.concat**: This method creates a new array by concatenating two or more arrays. It's a traditional way of merging arrays in JavaScript. + Pros: Simple, widely supported, and relatively fast. + Cons: Creates a new array object, which can lead to memory allocation overhead. * **Spread Operator (`...`)**: This method uses the spread operator to merge arrays by spreading their elements into a new array. + Pros: Efficient, concise, and easy to read. It creates a new array without modifying the original one. + Cons: Requires modern JavaScript features (ES6+) and might not be supported in older browsers or environments. * **Push Spread**: This method uses the `push()` method with the spread operator (`...`) to append elements to an existing array. + Pros: Efficient, concise, and easy to read. It's a good alternative when you need to modify an existing array. + Cons: Requires modern JavaScript features (ES6+) and might not be supported in older browsers or environments. **Other Considerations** * **Looping through subarrays**: All three methods involve looping through the subarrays in `subarrs`. The loop logic is similar, but it's worth noting that some versions of these loops have minor differences. * **Browser support**: Since the benchmark uses modern JavaScript features (ES6+), the results might not be applicable to older browsers or environments. **Alternative Methods** If you're interested in exploring alternative methods, here are a few: * **Array.prototype.push() and unshift()**: These methods can be used instead of `concat()` by pushing or unshifting elements onto an array. * **Array.prototype.reduce() and spread operator**: This method combines two arrays using the `reduce()` function and the spread operator (`...`). * **For...of loop with push()**: Instead of using a traditional for loop, you can use a for...of loop to iterate through subarrays and append elements to an existing array. Keep in mind that these alternative methods might have different performance characteristics or require different handling for edge cases.
Related benchmarks:
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
Array.prototype.concat vs spread operator
Array spread (left) vs push
Comments
Confirm delete:
Do you really want to delete benchmark?