Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push vs spread for large arrays 2
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Concat vs Spread
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], spread:[]}; window.test = (new Array(10)).fill(null); window.cutoff = 5000;
Tests:
Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Spread
window.top.tests.spread = [...window.top.tests.spread, ...window.test]; if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Control (for push)
Concat
Spread
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/124.0.0.0 Safari/537.36
Browser/OS:
Chrome 124 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=522487" width="100%" height="500px"></iframe>
Concat
493K/s
Spread
334K/s
Control (for push)
317K/s
View exact numbers
Test name
Executions per second
✓
Concat
492,559 Ops/sec
Spread
333,998 Ops/sec
Control (for push)
317,088 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the test cases and explain what is being tested. **What is being tested?** The test case measures how different approaches perform when appending to a large array in JavaScript: 1. **Control (for push)**: Using the `push()` method on an array to append new elements. 2. **Concat**: Using the `concat()` method on an array to append new elements. 3. **Spread**: Using the spread operator (`...`) to create a new array by appending existing elements. **Options compared** The test case is comparing three options: * `control` (using `push()`) * `concat` (using `concat()`) * `spread` (using the spread operator) **Pros and Cons of each approach:** 1. **Control (for push)**: * Pros: + Fast and efficient, as it modifies the original array. + Can be more intuitive for developers familiar with the `push()` method. * Cons: + May cause performance issues if the array is very large, as it involves modifying the original array. 2. **Concat**: * Pros: + Creates a new array each time, which can be beneficial for large datasets to avoid modifying the original array. + Can be more predictable and easier to debug. * Cons: + May be slower than `push()` due to the overhead of creating a new array. 3. **Spread**: * Pros: + Creates a new array by appending elements, which can help avoid performance issues with large datasets. + Can be more concise and expressive for developers familiar with the spread operator. * Cons: + May require more memory to create a new array each time. **Library: None** There is no library used in this test case. The functionality is built-in to JavaScript. **Special JS feature or syntax: Spread operator (`...`)** The spread operator is a relatively recent addition to JavaScript, introduced in ECMAScript 2015 (ES6). It allows you to create a new array by spreading elements from an existing array. Other alternatives: * Using `Array.prototype.push()` with `array.length` as the second argument (e.g., `array.push(...newArray)`) could be another approach. * Using `Array.prototype.concat()` with no arguments (e.g., `array = array.concat(newArray)`) could also be an alternative. However, this approach would create a new array and modify the original one, similar to the `concat` test case. In summary, the test case measures the performance differences between three approaches for appending elements to a large array in JavaScript: using `push()`, `concat()`, or the spread operator (`...`). The results can help developers make informed decisions about which approach to use depending on their specific requirements and performance considerations.
Related benchmarks
Concat vs push(...) vs spread for large arrays
Concat vs push(...) vs push.apply for large arrays
Concat vs push(...) for large arrays with PrototypePushApply
Comments
Confirm delete:
Do you really want to delete benchmark?