Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
JavaScript Array concat vs spread vs push
(version: 0)
Benchmark.js
Comparing performance of:
Concat vs Spread vs Push
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
Concat
const first = Array(1000).fill(null).map((_, i) => i); const second = Array(1000).fill(null).map((_, i) => i + 1000); const third = first.concat(second);
Spread
const first = Array(1000).fill(null).map((_, i) => i); const second = Array(1000).fill(null).map((_, i) => i + 1000); const third = [...first, ...second];
Push
const first = Array(1000).fill(null).map((_, i) => i); const second = Array(1000).fill(null).map((_, i) => i + 1000); const third = []; third.push(...first); third.push(...second);
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:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Browser/OS:
Chrome 119 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=499700" width="100%" height="500px"></iframe>
Push
75K/s
Spread
71K/s
Concat
68K/s
View exact numbers
Test name
Executions per second
✓
Push
75,367 Ops/sec
Spread
70,610 Ops/sec
Concat
67,864 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, the different approaches compared, and their pros and cons. **What is being tested?** The benchmark is measuring the performance of three different ways to concatenate (add elements to) an array in JavaScript: 1. Using the `concat()` method 2. Using the spread operator (`...`) 3. Using the `push()` method with multiple arguments These methods are used to create a new array by combining two existing arrays. **Options compared:** Here's a brief overview of each option and their characteristics: * **Concat()**: This method creates a new array and returns it, containing all elements from both input arrays. It's the most straightforward way to concatenate arrays. + Pros: Easy to understand, widely supported, and suitable for small datasets. + Cons: Creates a new array, which can be memory-intensive for large datasets. * **Spread operator (`...`)**: This operator creates a new array by spreading all elements from both input arrays. It's a shorthand way of concatenating arrays. + Pros: Memory-efficient (no need to create a new array), widely supported, and suitable for small to medium-sized datasets. + Cons: Can be less readable than other methods, especially for complex scenarios. * **Push() with multiple arguments**: This method modifies the existing array by adding one or more elements at the end. It's often used in conjunction with `push()` and can be combined with other methods (e.g., `concat()`). + Pros: Memory-efficient (no need to create a new array), suitable for modifying arrays, and widely supported. + Cons: Can be less readable than other methods, especially when using multiple `push()` calls. **Library usage:** There are no libraries explicitly mentioned in the benchmark definition or test cases. However, it's worth noting that some JavaScript engines (like V8) have built-in optimizations for certain operations, which might affect performance. **Special JS features:** The benchmark doesn't use any special JavaScript features, such as `let` or `const` declarations, arrow functions, or classes. It focuses on the basic array concatenation methods. **Other alternatives:** If you were to implement an alternative approach for array concatenation, some options could be: * Using a loop to iterate over both arrays and add elements to a new array * Utilizing a library like Lodash, which provides utility functions for array manipulation (e.g., `lodash.concat()`) * Implementing a custom, optimized algorithm using bitwise operations or other low-level techniques However, these alternatives might not be as efficient or memory-friendly as the tested methods. **Benchmark result analysis:** The benchmark results show that, on average, the **Push() with multiple arguments** approach performed the best (highest ExecutionPerSecond) among the three options. This is likely due to its memory efficiency and ability to modify the existing array in place. However, it's essential to note that these results might not be representative of all use cases or environments. Overall, this benchmark provides a good starting point for comparing the performance of different array concatenation methods in JavaScript, which can help developers make informed decisions about their coding choices.
Related benchmarks
Array spread vs. push performance
Array push vs spread vs concat
Array.prototype.concat vs spread operator vs push (no jQuery test)
Comments
Confirm delete:
Do you really want to delete benchmark?