Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push(...) for large arrays
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Concat vs Spread
Created:
7 years ago
by:
Guest
Jump 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.push(...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:
11 days ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0
Browser/OS:
Firefox 149 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Control (for push)
269374.0 Ops/sec
Concat
245921.0 Ops/sec
Spread
927466.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 approaches to appending to a large array in JavaScript: 1. Using `push()` method (Control) 2. Using `concat()` method (Concat) 3. Using spread syntax (`...`) (Spread) These tests aim to determine which approach is the fastest and most efficient for large arrays. **Library and Purpose** In this benchmark, two libraries/libraries are used: * **Array.prototype.push()**: This is a built-in JavaScript function that appends an element to the end of an array. * **Array.prototype.concat()**: This is also a built-in JavaScript function that returns a new array containing all elements from the original array and any additional arrays provided as arguments. **Special JS Feature/Syntax** The benchmark uses the spread syntax (`...`) to append elements to an array. The spread syntax was introduced in ECMAScript 2015 (ES6) and allows for creating a new array by spreading the elements of an existing array or an array-like object. **Benchmark Test Cases** Each test case is defined as follows: * `window.top.tests.control.push(element);`: This line appends an element to the end of the `control` array using the `push()` method. * `window.top.tests.concat = window.top.tests.concat.concat(window.test);`: This line appends all elements from the `test` array to the end of the `concat` array using the `concat()` method. * `window.top.tests.spread.push(...window.test);`: This line appends all elements from the `test` array to the end of the `spread` array using the spread syntax (`...`). **Options Being Compared** The benchmark compares the performance of each approach for large arrays: * Control (push():) * Concat (concat():) * Spread (...) **Pros and Cons of Each Approach** Here's a brief overview of the pros and cons of each approach: 1. **Control (push()):** * Pros: Efficient, widely supported, and easy to use. * Cons: May be slower for very large arrays due to the overhead of function calls. 2. **Concat (concat():** * Pros: Can be efficient for large arrays when used correctly (e.g., using `concat()` with an array-like object). * Cons: May be slower than push() due to the overhead of creating a new array and iterating over its elements. 3. **Spread (...):** * Pros: Efficient, concise, and easy to use. * Cons: May not work correctly in older browsers or environments that don't support the spread syntax. **Other Considerations** When choosing an approach, consider the following factors: * Performance: For very large arrays, push() may be faster due to its simplicity and reduced overhead. However, for smaller arrays, the difference between approaches is likely negligible. * Code readability and maintainability: Spread syntax can make code more concise and readable, but it's essential to ensure that it's used correctly to avoid errors or performance issues. * Browser support: Make sure that the approach you choose works in the target browsers or environments. **Alternatives** Other alternatives for appending elements to an array include: * `unshift()`: Adds an element to the beginning of an array, which can be useful for inserting new elements at a specific position. * `splice()`: Removes and replaces elements in an array, which can be useful for inserting or removing elements at specific positions. However, these alternatives may not offer the same level of efficiency or convenience as push(), concat(), or spread().
Related benchmarks:
Concat vs push(...) vs spread for large arrays
Concat vs push(...) vs. spread for large arrays
Concat vs push(...) for large arrays using spread in test 2
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?