Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs spread operator vs push 100k
(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
Created:
2 years ago
by:
Guest
Jump to the latest result
Tests:
Array.prototype.concat
const arrayLength = 100000; // Function to generate random data (number, string, or boolean) const getRandomData = () => { const randomNumber = Math.floor(Math.random() * 1000); // Random number between 0 and 999 const randomString = Math.random().toString(36).substring(7); // Random string const randomBoolean = Math.random() < 0.5; // Random boolean (true or false) // Randomly choose one of the three data types const randomDataType = [randomNumber, randomString, randomBoolean][ Math.floor(Math.random() * 3) ]; return randomDataType; }; const largeArray1 = Array.from({ length: arrayLength }, () => getRandomData()); const largeArray2 = Array.from({ length: arrayLength }, () => getRandomData()); var other = largeArray1.concat(largeArray2);
spread operator
const arrayLength = 100000; // Function to generate random data (number, string, or boolean) const getRandomData = () => { const randomNumber = Math.floor(Math.random() * 1000); // Random number between 0 and 999 const randomString = Math.random().toString(36).substring(7); // Random string const randomBoolean = Math.random() < 0.5; // Random boolean (true or false) // Randomly choose one of the three data types const randomDataType = [randomNumber, randomString, randomBoolean][ Math.floor(Math.random() * 3) ]; return randomDataType; }; const largeArray1 = Array.from({ length: arrayLength }, () => getRandomData()); const largeArray2 = Array.from({ length: arrayLength }, () => getRandomData()); var other = [ ...largeArray1, ...largeArray2 ]
Push
const arrayLength = 100000; // Function to generate random data (number, string, or boolean) const getRandomData = () => { const randomNumber = Math.floor(Math.random() * 1000); // Random number between 0 and 999 const randomString = Math.random().toString(36).substring(7); // Random string const randomBoolean = Math.random() < 0.5; // Random boolean (true or false) // Randomly choose one of the three data types const randomDataType = [randomNumber, randomString, randomBoolean][ Math.floor(Math.random() * 3) ]; return randomDataType; }; const largeArray1 = Array.from({ length: arrayLength }, () => getRandomData()); const largeArray2 = Array.from({ length: arrayLength }, () => getRandomData()); var other = largeArray1.push(...largeArray2);
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:
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 dive into the explanation of the provided benchmark. **Benchmark Definition** The website `MeasureThat.net` provides a JSON definition for the benchmark, which includes: * **Name**: The name of the benchmark, "Array concat vs spread operator vs push 100k". * **Description**: A brief description of the benchmark, comparing the new ES6 spread operator with traditional methods (concat() and push) when concatenating two arrays. * **Script Preparation Code** and **Html Preparation Code**: These fields are left blank in this case. **Individual Test Cases** There are three test cases: 1. **Array.prototype.concat**: This test case uses the `concat()` method to concatenate two arrays, `largeArray1` and `largeArray2`. * **Library Used**: No specific library is used; it's a built-in JavaScript method. * **Pros**: * Wide browser support * Well-documented and widely used * **Cons**: * Less efficient compared to other methods (as seen in the benchmark results) 2. **Spread Operator**: This test case uses the spread operator (`...`) to concatenate two arrays, `largeArray1` and `largeArray2`. * **Library Used**: No specific library is used; it's a built-in JavaScript feature. * **Pros**: * Efficient and concise * Wide browser support (including older versions) 3. **Push**: This test case uses the `push()` method to concatenate two arrays, `largeArray1` and `largeArray2`. * **Library Used**: No specific library is used; it's a built-in JavaScript method. * **Pros**: * Efficient for large datasets * Less memory-intensive than using concatenation or spread operator **Benchmark Results** The latest benchmark results show the performance of each test case on different devices and browsers. The data suggests that: * Push is generally faster than the other two methods. * Spread Operator is more efficient than `concat()`. Overall, this benchmark highlights the trade-offs between using built-in JavaScript methods like `concat()`, spread operator (`...`), or `push()` when working with arrays in JavaScript.
Related benchmarks:
Array.prototype.concat vs Spread operator
Array.prototype.concat vs Spread operator
concat 2 arrays: Array.prototype.concat vs spread operator
Array concat vs spread operator vs push with more data
Array.prototype.concat vs spread operator on large array
Comments
Confirm delete:
Do you really want to delete benchmark?