Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Array concat vs. spread vs. push
(version: 0)
Comparing performance of:
concat vs spread vs push
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
concat
let a = [...Array(100)].map(() => Math.random()); let addCount = 10000; while (--addCount) { a = a.concat(Math.random()); }
spread
let a = [...Array(100)].map(() => Math.random()); let addCount = 10000; while (--addCount) { a = [...a, Math.random()]; }
push
let a = [...Array(100)].map(() => Math.random()); let addCount = 10000; while (--addCount) { a.push(Math.random()); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
concat
spread
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 break down the benchmark and its options. **Benchmark Definition** The test is designed to measure the performance of three different ways to add elements to an array in JavaScript: `concat`, `spread`, and `push`. The arrays being added to are created using the spread operator (`[...Array(100)].map(() => Math.random())`) to ensure that each test case has a large number of random elements. **Options Compared** The three options being compared are: 1. **`concat`**: Uses the `concat()` method to add new elements to the end of the array. 2. **`spread`**: Uses the spread operator (`...`) to create a new array by spreading the existing array, and then adds new elements to this new array using the spread operator again. 3. **`push`**: Uses the `push()` method to add one or more elements to the end of the array. **Pros and Cons** Here are some pros and cons of each approach: * **`concat`**: + Pros: Simple and efficient, especially for small arrays. + Cons: Creates a new array when called, which can be memory-intensive for large arrays. * **`spread`**: + Pros: More efficient than `concat` for large arrays, as it modifies the existing array in place. + Cons: Can be slower for very large arrays due to the creation of a temporary copy. * **`push`**: + Pros: Most memory-efficient option, especially for large arrays, since it only modifies the existing array. + Cons: Can be slower than `concat` or `spread` when dealing with very large arrays. **Library and Special JS Features** None of these tests use any libraries. They also don't test special JavaScript features like async/await or promises. **Other Considerations** When running benchmarks, it's essential to consider the following factors: * **Garbage collection**: Modern JavaScript engines are designed to minimize the impact of garbage collection on performance. However, for very large arrays, the allocation and deallocation of memory can still affect performance. * **Array resizing**: When using `concat` or `push`, the engine needs to resize the array, which can be an expensive operation. **Alternatives** There are other ways to add elements to an array in JavaScript: * **`slice()`**: Can be used to create a new array by slicing the existing array. * **`set()`**: Can be used to add all elements from another array to the end of the current array. * **`Array.prototype.set()`**: A more efficient alternative to `concat`, but still creates a new array. However, these alternatives are not being tested in this benchmark.
Related benchmarks:
Array spread vs. push performance
Array push vs spread vs concat
unshift vs spread vs concat
Array concat vs spread operator vs push larger list
Array.prototype.concat vs spread operator vs push with spread
Comments
Confirm delete:
Do you really want to delete benchmark?