Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
array merging performance comparison
(version: 0)
Benchmark.js
Comparing performance of:
spread vs concat vs splice vs push
Created:
4 years ago
by:
Guest
Go to the latest result
Tests:
spread
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list = [...result.list, ...toMerge] } while (original.length > 0)
concat
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list = result.list.concat(toMerge) } while (original.length > 0)
splice
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list.splice(result.list.length, 0, ...toMerge) } while (original.length > 0)
push
const original = [] for (let i=0; i<=1000; i++) { original.push({i}) } const result = {list: []} do { const toMerge = original.splice(0, 100) result.list.push(...toMerge) } while (original.length > 0)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
spread
concat
splice
push
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0
Browser/OS:
Firefox 149 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=627517" width="100%" height="500px"></iframe>
push
91K/s
concat
61K/s
splice
61K/s
spread
23K/s
View exact numbers
Test name
Executions per second
✓
push
91,438 Ops/sec
concat
60,891 Ops/sec
splice
60,873 Ops/sec
spread
23,005 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Overview** The benchmark measures the performance of four different ways to merge an array in JavaScript: `concat`, `push`, `splice`, and `spread`. The benchmark creates an array of 1000 objects and then repeatedly merges a chunk of 100 elements into another array. The merged arrays are stored in separate variables, which are used as input for the next iteration. **Options Compared** The four options compared are: 1. `concat`: Using the `concat()` method to merge two arrays. 2. `push`: Using the `push()` method to add elements to an array and then creating a new array from the existing one using `Array.from()`. 3. `splice`: Using the `splice()` method to remove elements from an array, create a new array from the removed elements, and then concatenate it with the original array. 4. `spread`: Using the spread operator (`...`) to merge two arrays. **Pros and Cons** Here's a brief summary of the pros and cons of each approach: 1. `concat`: * Pros: Simple, efficient, and widely supported. * Cons: Can lead to memory issues if the input array is large and the `concat()` method creates a new array that exceeds the maximum allowed size in JavaScript engines. 2. `push`: * Pros: Efficient for small arrays and can avoid memory issues by creating an empty array before pushing elements. * Cons: Creates an intermediate array, which can lead to performance issues if not done efficiently. 3. `splice`: * Pros: Can be efficient for large input arrays since it only removes elements from the original array. * Cons: Requires more operations compared to `concat`, and the removed elements are stored in a new array. 4. `spread`: * Pros: Efficient, concise, and widely supported. * Cons: Can lead to memory issues if the input array is large, as it creates an intermediate array. **Library Usage** There are no external libraries used in this benchmark, which is likely due to the simplicity of the operations performed. **Special JS Feature/Syntax** None of the test cases use any special JavaScript features or syntax beyond standard ES6 features. The spread operator (`...`) is used to merge arrays, but it's a widely supported and well-documented feature. **Alternatives** If you're interested in exploring alternative approaches, consider using: 1. `Array.prototype.reduce()`: A more functional approach to merging arrays by reducing the input array to a single value. 2. `Array.prototype.slice()`: Creating an empty array using `slice()` and then adding elements to it can be another efficient approach. 3. Custom implementation: Depending on your specific requirements, you might want to implement your own array merging algorithm from scratch. Keep in mind that performance differences between these approaches may be negligible for small input sizes. However, as the input size grows, more efficient algorithms like `splice` or custom implementations might become necessary to avoid performance bottlenecks.
Related benchmarks
Sorting test
Comments
Confirm delete:
Do you really want to delete benchmark?