Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Spread vs unshift sam
(version: 0)
Comparing performance of:
unshift vs spread
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var arr = []; for (let i = 0; i < 100_000; ++i) { arr.push('i: ' + i); }
Tests:
unshift
arr.unshift('AddedToFront'); const arr2 = arr;
spread
const arr2 = ['AddedToFront', ...arr];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
unshift
spread
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/123.0.0.0 Safari/537.36
Browser/OS:
Chrome 123 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=516856" width="100%" height="500px"></iframe>
unshift
16K/s
spread
255/s
View exact numbers
Test name
Executions per second
✓
unshift
16,298 Ops/sec
spread
255 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. **Benchmark Overview** The benchmark compares two ways to add elements to an array: using `unshift()` or using the spread operator (`...`). The test case uses a sample JavaScript array, initialized with 100,000 elements, each containing a string representation of its index. This allows us to measure the performance difference between these two approaches. **Benchmark Definition** The benchmark definition is provided in JSON format and consists of two parts: 1. **Script Preparation Code**: This code initializes an empty array `arr` and populates it with 100,000 elements using a `for` loop. 2. **Html Preparation Code**: This field is empty, indicating that no HTML-related preparation is needed for this benchmark. **Individual Test Cases** The benchmark consists of two test cases: 1. **unshift**: The first test case measures the performance of adding an element to the beginning of the array using `unshift()`. It executes the line `arr.unshift('AddedToFront');` and assigns the result to a new variable `arr2`. 2. **spread**: The second test case measures the performance of creating a new array by spreading the original array using the spread operator (`...`). It executes the line `const arr2 = ['AddedToFront', ...arr];`. **Library Used** In this benchmark, no specific JavaScript library is explicitly mentioned or used. **Special JS Feature/Syntax** The use of the spread operator (`...`) in one of the test cases introduces a modern JavaScript feature that was introduced in ECMAScript 2015 (ES6). This syntax allows for creating new arrays by spreading existing arrays or other iterable objects. **Pros and Cons of Each Approach** 1. **unshift()**: * Pros: Simple and straightforward to implement. * Cons: Can be slower than using the spread operator, as it involves searching for the beginning of the array and updating the length property. 2. **Spread Operator (`...`)**: * Pros: Often faster than `unshift()` due to its ability to create a new array without modifying the original one. * Cons: Can be less intuitive to read and understand, especially for older browsers or developers unfamiliar with modern JavaScript syntax. **Other Alternatives** If you wanted to use alternative approaches, you could consider: 1. **Array.prototype.push()**: Instead of using `unshift()`, you can push elements onto the end of the array and then reverse it. 2. **Slice() function**: You can create a new array by slicing the original array from the beginning to the specified index. Here's an example: ```javascript arr = arr.slice(0, 1).concat(['AddedToFront']); ``` Keep in mind that these alternatives might have different performance characteristics and may not be as efficient as using `unshift()` or the spread operator. In summary, this benchmark measures the performance difference between two approaches to add elements to an array: using `unshift()` versus the spread operator (`...`). The use of modern JavaScript features like the spread operator introduces a new dimension to benchmarking and highlights the importance of considering performance characteristics when optimizing code.
Related benchmarks
Push vs LHS spread
Comments
Confirm delete:
Do you really want to delete benchmark?