Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
reassigning an object with 10000 objects
(version: 14)
Comparing performance of:
index vs map
Created:
2 years ago
by:
Registered User
Jump to the latest result
Script Preparation code:
var array = []; for (var i = 1; i <= 10000; i++) { array.push({ id: i, name: `Item ${i}` }); } var newObject = { id: 8868, name: 'Updated Item 2' };
Tests:
index
var index = array.findIndex(item => item.id === newObject.id); var updatedArray; if (index !== -1) { updatedArray = [ ...array.slice(0, index), // Elements before the updated item newObject, // The updated item ...array.slice(index + 1) // Elements after the updated item ]; } else { // If the item isn't found, the array remains unchanged updatedArray = array; }
map
var arr = array.map(item => { if (item.id === newObject.id) { return newObject; } return item; });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
index
map
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2.1 Safari/605.1.15
Browser/OS:
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
index
2748.7 Ops/sec
map
2503.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons, library usage, special JS features, and other considerations. **Benchmark Overview** The benchmark tests the performance of JavaScript functions to reassign an array with 10,000 objects. The two test cases compare the `index` method (using `findIndex`) and the `map` function. **Script Preparation Code** The script preparation code creates a large array (`array`) by pushing 10,000 objects onto it using a `for` loop. Each object has an `id` property and a `name` property set to a string. A second object (`newObject`) is also created with its own properties. **Html Preparation Code** There is no HTML preparation code provided for this benchmark, which means the test only focuses on JavaScript performance. **Individual Test Cases** The two test cases are: 1. **index**: This test case uses the `findIndex` method to search for a specific object (`newObject`) in the large array (`array`). If found, it creates a new array by slicing and concatenating existing elements. 2. **map**: This test case uses the `map` function to create a new array with modified objects. It checks if an object's `id` matches the `id` of `newObject`, and returns the original object if a match is found. **Options Compared** The two test cases compare the following options: * **index**: Using `findIndex` to search for an element in the array. * **map**: Using the `map` function to create a new array with modified objects. **Pros and Cons** Here are some pros and cons of each approach: 1. **index**: * Pros: Faster lookup and replacement. * Cons: May cause unnecessary computations if the object is not found. 2. **map**: * Pros: Can modify objects in place, reducing memory allocation. * Cons: May be slower due to array copying. **Library Usage** There is no library usage in these test cases. However, the `slice` method and `concat` method are used within the `findIndex` and `map` functions, respectively. These methods are built-in JavaScript methods. **Special JS Features** Neither of the two test cases uses special JavaScript features such as async/await, promises, or decorators. **Other Considerations** When interpreting benchmark results, consider factors like: * **Cache locality**: How well do the test cases utilize cache memory? * **Branch prediction**: Can the test cases predict the branch (if statement) execution? * **Execution order**: Does the order of execution matter for these test cases? **Alternatives** Other alternatives to these approaches include: 1. **filter()**: Instead of using `findIndex`, you can use the `filter()` method to create a new array with objects that match a condition. 2. **forEach()**: You can also iterate over the array using the `forEach()` method and update elements in place. Keep in mind that these alternatives may not provide the exact same performance characteristics as the original test cases, but they can offer alternative solutions depending on your specific requirements.
Related benchmarks:
obj vs array
for vs. for-of vs. reduce (array to ID-keyed object)
for vs. for-of vs. reduce (array to ID-keyed object) vs. while (reversed)
Object reduction with conversion back
Comments
Confirm delete:
Do you really want to delete benchmark?