Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Concat vs push(...) for large arrays fork seb
(version: 0)
Comparing the various ways to append to a large array
Comparing performance of:
Control (for push) vs Concat vs Push Spread vs Spread only
Created:
3 years ago
by:
Registered User
Jump to the latest result
Script Preparation code:
window.top.tests = {control:[], concat:[], pushspread:[], spreadonly: []}; 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'); }
Push Spread
window.top.tests.pushspread.push(...window.test); if (window.top.tests.pushspread.length > window.cutoff) { window.top.tests.pushspread = []; console.log('reset spread'); }
Spread only
window.top.tests.spreadonly = [...window.top.tests.spreadonly, ...window.test]; if (window.top.tests.spreadonly.length > window.cutoff) { window.top.tests.spreadonly = []; console.log('reset spread'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Control (for push)
Concat
Push Spread
Spread only
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 benchmark and explain what's being tested. **Benchmark Definition** The benchmark is designed to compare four different approaches for appending elements to an array: 1. `push()`: A method that adds one or more elements to the end of an array. 2. `concat()`: A method that returns a new array created by concatenating the elements of this array with the elements of a specified array or value. 3. `push(...)` (spread syntax): An operator that adds multiple elements to the end of an array using the spread operator (`...`). 4. Spread-only approach: Similar to `push(...)` but only uses spread syntax without any additional methods. **Options Compared** The benchmark compares these four approaches for appending elements to a large array, with different lengths and reset conditions. * Each test case has a specific setup: + A new array is created using `(new Array(10)).fill(null);` + The `cutoff` value is set to 5000, which means the benchmark will stop running when the length of the arrays exceeds this value * Each test case appends elements to an array and measures the execution time: + `Control (for push)`: Uses the `push()` method to add elements to the array. + `Concat`: Uses the `concat()` method to create a new array by concatenating the elements of the original array with the elements of the test array. + `Push Spread`: Uses the spread syntax (`...`) to add multiple elements to the end of the array. + `Spread only`: Similar to `Push Spread`, but uses only spread syntax without any additional methods. **Pros and Cons** Here's a brief summary of each approach: * **push()**: Efficient for small arrays, as it modifies the existing array. However, it can be slower for large arrays due to the overhead of modifying an array. * **concat()**: Can be slower than `push()` because it creates a new array and copies all elements from both arrays. It's also less efficient for very large arrays. * **Push Spread** (`...`): Offers good performance for most use cases, as it uses native code to add elements to the array. However, it may not be supported in older browsers or environments. * `Spread only`: Similar to `Push Spread`, but with less overhead due to no additional methods. **Library and Special JS Features** There is no specific library used in this benchmark. It relies on standard JavaScript features, such as arrays, methods (`push()`, `concat()`), and the spread operator (`...`). **Other Considerations** When working with large arrays or performance-critical code, consider the following: * Use native methods like `push()` when possible to avoid unnecessary array creations. * Optimize for small arrays by using `push()` instead of creating new arrays. * Be mindful of older browser support when using modern features like spread syntax. **Alternatives** If you're looking for alternative approaches or tools, consider the following: * Benchmarking frameworks: Libraries like Benchmark.js or Microbenchmark provide more features and flexibility for benchmarking JavaScript code. * Performance profiling tools: Instruments like Chrome DevTools or Node.js Inspector can help identify performance bottlenecks in your code. I hope this explanation helps!
Related benchmarks:
Concat vs push(...) vs spread for large arrays
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?