Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
concat vs spread operator vs push (little-medium array)
(version: 0)
Compare the spread operator vs concat and push with little-medium arrays.
Comparing performance of:
Array.prototype.concat vs Spread operator vs Array.prototype.push vs Array.prototype.push with assignment
Created:
6 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var array1 = [...Array(100).keys()] // [0, 1, 2, ..., 99] var array2 = [...Array(100).keys()] // [0, 1, 2, ..., 99]
Tests:
Array.prototype.concat
array1 = array1.concat(array2)
Spread operator
array1 = [...array1, array2]
Array.prototype.push
array1.push(...array2)
Array.prototype.push with assignment
var x = array1.push(...array2)
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
Array.prototype.concat
Spread operator
Array.prototype.push
Array.prototype.push with assignment
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):
**Overview of the Benchmark** The provided benchmark compares the performance of three approaches to concatenate arrays in JavaScript: `Array.prototype.concat`, the spread operator (`...`), and `Array.prototype.push`. The benchmark creates two arrays of length 100 using the spread operator and concatenates them with these three approaches. **Options Compared** 1. **`Array.prototype.concat"`**: This method creates a new array by concatenating the elements of the original array with the elements of another array. 2. **Spread Operator (`...`)**: This syntax creates a new array by copying the elements of an existing array and adding them to a new array. 3. **`Array.prototype.push()`**: This method adds one or more elements to the end of an array. **Pros and Cons of Each Approach** 1. **`Array.prototype.concat()`**: * Pros: Creates a new array, which can be beneficial for performance when working with large arrays. * Cons: Creates a new array object, which requires additional memory allocation and copying. 2. **Spread Operator (`...`)**: * Pros: Does not create a new array, instead modifies the original array, which reduces memory allocation and copying overhead. * Cons: Only works for creating a new array from an existing one; cannot be used to concatenate arrays of different lengths. 3. **`Array.prototype.push()`**: * Pros: Modifies the original array, reducing memory allocation and copying overhead. * Cons: Adds elements at the end of the array, which can lead to slower performance for large arrays. **Library Used** None explicitly mentioned in the benchmark definition or test cases. **Special JS Features/Syntax** The benchmark uses the spread operator (`...`) and `Array.prototype.push()` with assignment (`var x = ...`). The spread operator is a relatively modern feature introduced in ECMAScript 2015 (ES6), while `Array.prototype.push()` with assignment is a more recent addition to the language, introduced in ECMAScript 2019 (ES9). **Other Considerations** The benchmark uses two arrays of length 100, which may not be representative of real-world scenarios where array lengths can vary greatly. **Alternatives** 1. **`Array.prototype.push()` without assignment**: This approach adds elements to the end of the array, but does not modify the original variable (e.g., `array1.push(...array2)`). 2. **`concat()` with a new array creation**: Instead of concatenating arrays using the spread operator or `push()`, you can create a new array and assign it to a variable using `Array.prototype.concat()`. 3. **Other array concatenation methods**: There are other ways to concatenate arrays in JavaScript, such as using the `slice()` method or the `Array.prototype.reduce()` method. In summary, the benchmark provides a concise comparison of three common approaches to concatenate arrays in JavaScript, highlighting the trade-offs between memory allocation and copying overhead.
Related benchmarks:
Array spread vs. push performance
concat vs spread operator vs push (big array)
concat vs spread operator vs push (medium array)
Array concat vs spread operator vs push with more data
Comments
Confirm delete:
Do you really want to delete benchmark?