Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Object arrays: map + indexOf vs for loop vs findIndex for finding and editing an array item.
(version: 0)
Benchmark.js
Test finding an object array via findIndex or by using a for loop, and edit the value of that index.
Comparing performance of:
findIndex vs for loop vs Map + IndexOf
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
/* make a new array with 15k items */ var arr = new Array(15000); /* fill array tems with basic object */ arr.fill({ id: 0 }); /* generate 2 random numbers in our 15k range */ var foo = Math.floor(Math.random() * 15000); var bar = Math.floor(Math.random() * 15000); /* set the index of arr[foo] to foo for our tests */ arr[foo].id = foo;
Tests:
findIndex
const bookFreePlatform = (arr, foo, bar) => { /* find array index where id == foo */ var index = arr.findIndex(item => item.id === foo); /* findIndex returns -1 on fail, so test for that */ if ( index != -1 ) { /* ok, we have an index, lets edit that entry, and console log it for fun */ arr[index].id = bar; console.log(arr[index]); } /* return altered array */ return arr; } bookFreePlatform(arr, foo, bar);
for loop
const bookFreePlatform = (arr, foo, bar) => { /* find array item where id == foo */ for (let i = 0; i < arr.length; i++) { /* not an error check, just a simple comparison */ if (arr[i].id === foo) { /* if we got here, it found and index, lets edit it and log it again */ arr[i].id = bar; console.log(arr[i]); /* stop the loop to save time and resources, we're done */ break; } } /* return altered array */ return arr; } bookFreePlatform(arr, foo, bar);
Map + IndexOf
const bookFreePlatform = (arr, foo, bar) => { /* find array index where id == foo */ var index = arr.map(item => item.id).indexOf(foo); /* findIndex returns -1 on fail, so test for that */ if ( index != -1 ) { /* ok, we have an index, lets edit that entry, and console log it for fun */ arr[index].id = bar; console.log(arr[index]); } /* return altered array */ return arr; } bookFreePlatform(arr, foo, bar);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
findIndex
for loop
Map + IndexOf
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0
Browser/OS:
Firefox 129 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=540879" width="100%" height="500px"></iframe>
for loop
76K/s
findIndex
59K/s
Map + IndexOf
11K/s
View exact numbers
Test name
Executions per second
✓
for loop
76,016 Ops/sec
findIndex
59,375 Ops/sec
Map + IndexOf
11,091 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark measures the performance of three approaches to find an element in an array and update its value: 1. **findIndex**: Uses the `findIndex` method, which returns the index of the first element that satisfies the provided condition (in this case, `item.id === foo`). If no such element is found, it returns -1. 2. **for loop**: Iterates through the array using a traditional `for` loop to find the element with the matching `id`. 3. **Map + IndexOf**: Uses the `map` method to create an array of `id`s and then uses the `indexOf` method to find the index of the first occurrence of `foo` in that array. **Options Compared** The three options are compared in terms of their performance, which is measured by the number of executions per second (ExecutionsPerSecond). The goal is to identify the fastest approach for finding and updating an element in a large array. **Pros and Cons of Each Approach** 1. **findIndex**: * Pros: Efficient and concise implementation. * Cons: May be slower than other approaches if the array is very large, since it uses a linear search. 2. **for loop**: * Pros: Can be faster for small to medium-sized arrays due to the overhead of `map` and `indexOf`. * Cons: More verbose and error-prone compared to `findIndex`. 3. **Map + IndexOf**: * Pros: Can be faster than `findIndex` for large arrays, since it uses a more efficient search algorithm. * Cons: Requires creating an additional array using `map`, which can consume more memory. **Library Used** None. The benchmark uses built-in JavaScript methods and data structures (arrays). **Special JS Features or Syntax** The `findIndex` method is used to find the index of an element in an array, while the `for` loop iterates through the array manually using a traditional loop construct. No special JS features or syntax are used beyond these basic language constructs. **Other Alternatives** Other approaches that could be considered include: * Using `forEach` instead of a traditional `for` loop. * Using `reduce` to find and update the element in a single pass through the array. * Using a different search algorithm, such as binary search, which might be more efficient for large arrays. However, these alternatives are not explicitly tested in this benchmark.
Related benchmarks
findIndex vs map & indexOf
findIndex vs indexOf - JavaScript performance
Array.prototype.findIndex vs Array.prototype.map + Array.prototype.indexOf
findIndex vs IndexOf + map
Comments
Confirm delete:
Do you really want to delete benchmark?