Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push with two arrays, first one is big
(version: 0)
Compare the new ES6 spread operator with the traditional concat() method and push
Comparing performance of:
Array.prototype.concat vs spread operator twice vs Push
Created:
2 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
var arr1 = Array.from(Array(9999).keys()) var arr2 = Array.from(Array(20).keys()) var other = arr1.concat(arr2);
spread operator twice
var arr1 = Array.from(Array(9999).keys()) var arr2 = Array.from(Array(20).keys()) var other = [ ...arr1, ...arr2 ];
Push
var arr1 = Array.from(Array(9999).keys()) var arr2 = Array.from(Array(20).keys()) var other = arr1.push(...arr2);
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 twice
Push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Browser/OS:
Chrome 123 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=517875" width="100%" height="500px"></iframe>
Test name
Executions per second
Array.prototype.concat
5545.5 Ops/sec
spread operator twice
2843.6 Ops/sec
Push
3715.5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The benchmark compares three different approaches to concatenate two arrays in JavaScript: 1. `Array.prototype.concat()` 2. The new ES6 spread operator (`[ ... ]`) 3. The `push()` method with the spread operator (`arr.push(...array)`) **Options Compared** These three options are compared because they differ in their implementation, performance, and potential use cases. * **`Array.prototype.concat()`**: This method creates a new array by copying elements from both input arrays. It's a traditional approach that has been around for a long time. * **The ES6 spread operator (`[ ... ]`)**: This syntax was introduced in ECMAScript 2015 and allows you to create a new array by spreading the elements of an existing array. It's a concise way to concatenate arrays without creating intermediate arrays. * **`push()` method with the spread operator (`arr.push(...array)`)**: This approach uses the `push()` method to add elements from another array to the end of the current array. While it achieves the same result as `concat()`, it modifies the original array instead of creating a new one. **Pros and Cons** Here's a brief summary of each option: * **`Array.prototype.concat()`**: + Pros: Established, widely supported, and easy to understand. + Cons: Creates a new array, which can be memory-intensive for large inputs. * **ES6 spread operator (`[ ... ]`)**: + Pros: Concise, efficient, and creates a new array without modifying the original input. + Cons: May not be immediately familiar to older developers or those who don't know about it. * **`push()` method with the spread operator (`arr.push(...array)`)**: + Pros: Convenient for small arrays, but modifies the original array and may be slower than `concat()`. + Cons: Modifies the original array, which can be unexpected behavior. **Library/Functionality Used** None of these options rely on any external libraries or built-in functions beyond JavaScript's standard library. However, if we consider the spread operator (`[ ... ]`), it's a syntax feature introduced in ECMAScript 2015 and is not enabled by default in older browsers. **Special JS Feature/Syntax** The benchmark uses the ES6 spread operator (`[ ... ]`) syntax, which was introduced in ECMAScript 2015. This syntax allows you to create a new array by spreading elements from an existing array into a new array. While it's not enabled by default in older browsers, it's widely supported and has become a common pattern in modern JavaScript development. **Alternatives** If the spread operator isn't available or not preferred, other alternatives include: * Using `Array.prototype.concat()` * Creating a new array using the `Array.from()` method * Using a third-party library that provides a more efficient concatenation function Keep in mind that these alternatives may have different performance characteristics and might require additional setup or dependencies.
Related benchmarks:
concat 2 arrays: Array.prototype.concat vs spread operator
Concat vs Spread (Two Arrays)
Array concat vs spread operator vs push with more data
Array concat vs spread operator vs push for single values
Array.prototype.concat vs spread operator real
Comments
Confirm delete:
Do you really want to delete benchmark?