Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Add new element to array: push vs destructuring vs bracket access
(version: 0)
Benchmark.js
Comparing performance of:
spread operator vs Push vs bracket access
Created:
4 years ago
by:
Registered User
Go to the latest result
Tests:
spread operator
var params = [ "hello", true, 7 ] var other = [ ...params, 'new' ]
Push
var params = [ "hello", true, 7 ]; params.push('new');
bracket access
var params = [ "hello", true, 7 ]; params[ params.length ] = 'new';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
spread operator
Push
bracket access
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 120 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=490446" width="100%" height="500px"></iframe>
bracket access
19.0M/s
Push
18.7M/s
spread operator
9.5M/s
View exact numbers
Test name
Executions per second
✓
bracket access
19,028,126 Ops/sec
Push
18,724,860 Ops/sec
spread operator
9,522,795 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and its options for you. **Benchmark Overview** The benchmark measures the performance of three different approaches to adding a new element to an array in JavaScript: 1. **Push**: Using the `push()` method to add a new element to the end of the array. 2. **Destructuring**: Using the spread operator (`...`) to create a new array with the original elements and the new one added at the end. 3. **Bracket Access**: Using direct array indexing to access the last element and assign a new value. **Options Comparison** Here's a brief summary of each option: * **Push**: + Pros: Simple, widely supported, and efficient for small arrays. + Cons: May be slower than other methods for large arrays due to its overhead. * **Destructuring (Spread Operator)**: + Pros: Modern and efficient, especially for larger arrays. It also preserves the original array's structure. + Cons: Less common in older JavaScript versions and may not work as expected in some cases. * **Bracket Access**: + Pros: Lightweight and fast, but requires direct indexing of the array length. + Cons: May not be as intuitive or readable as other methods. **Library Usage** None of the test cases use external libraries, so there's no additional functionality to consider. **Special JS Feature/Syntax** The benchmark uses the **spread operator** (`...`), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows creating a new array by copying elements from an existing array. This syntax is not supported in older JavaScript versions, such as ES5. **Other Considerations** When choosing between these approaches, consider the following factors: * **Array size**: For small arrays, `push()` and bracket access might be sufficient. For larger arrays, destructuring with the spread operator might be more efficient. * **Readability and maintainability**: Bracket access can lead to more complex code, while `push()` is straightforward. Destructuring provides a balance between efficiency and readability. * **Browser support**: The benchmark results indicate that Chrome Mobile 120 supports all three approaches. **Alternative Approaches** Other methods for adding an element to an array include: * Using the `unshift()` method instead of `push()`, which adds the new element at the beginning of the array. * Using the `concat()` method or the spread operator (`...`) with a separate array, which creates a new array by concatenating or spreading elements. Keep in mind that these alternatives might have different performance characteristics and trade-offs.
Related benchmarks
Add new element to array: push vs destructuring
Add new element to array - unshift vs destructuring
Spread vs Push when adding into array
Comments
Confirm delete:
Do you really want to delete benchmark?