Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
find vs. Filter vs. indexOf
(version: 0)
Comparing performance of:
Array.find vs Array.filter vs Array.indexOf
Created:
3 years ago
by:
Guest
Go to the latest result
Script Preparation code:
var hasZero = []; var withoutZero = []; for (var i = 0; i < 10000; i++) { hasZero.push(Math.floor(Math.random() * 1000)); withoutZero.push(Math.floor(Math.random() * 1000) + 1) }
Tests:
Array.find
var tempResult = !!Math.round(Math.random()) ? hasZero.find(v => v === 0) : withoutZero.find(v => v === 0);
Array.filter
var tempResult = !!Math.round(Math.random()) ? hasZero.filter(v => v === 0) : withoutZero.filter(v => v === 0);
Array.indexOf
var tempResult = !!Math.round(Math.random()) ? hasZero.indexOf(v => v === 0) : withoutZero.indexOf(v => v === 0);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Array.find
Array.filter
Array.indexOf
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 YaBrowser/25.2.0.0 Safari/537.36
Browser/OS:
Yandex Browser 25 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=598942" width="100%" height="500px"></iframe>
Array.indexOf
505K/s
Array.find
103K/s
Array.filter
20K/s
View exact numbers
Test name
Executions per second
✓
Array.indexOf
505,366 Ops/sec
Array.find
103,358 Ops/sec
Array.filter
20,015 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 Definition** The benchmark is designed to compare three ways to find or filter elements in an array: `find`, `filter`, and `indexOf`. The test case uses two arrays, `hasZero` and `withoutZero`, each containing 10,000 random integers. The arrays are populated with zeros and non-zero values, respectively. **Options Compared** 1. **Array.find**: This method returns the first element in the array that satisfies the provided callback function. In this test case, it's used to find the first zero element in `hasZero` or `withoutZero`. 2. **Array.filter**: This method creates a new array with all elements that pass the test implemented by the provided callback function. In this test case, it's used to create a new array with only the zeros from `hasZero` or `withoutZero`. 3. **Array.indexOf**: This method returns the index of the first element in the array that satisfies the provided callback function. In this test case, it's used to find the index of the first zero element in `hasZero` or `withoutZero`. **Pros and Cons** * **Array.find**: + Pros: concise and efficient way to find a single element. + Cons: may not be suitable for arrays with large numbers of elements, as it returns the first matching element only. * **Array.filter**: + Pros: creates a new array with filtered elements, which can be useful for further processing or data analysis. + Cons: creates a new array, which can be memory-intensive for large datasets. Also, if the callback function is expensive to compute, it may impact performance. * **Array.indexOf**: + Pros: fast and efficient way to find an element by index. + Cons: returns the index of the first matching element only, not the element itself. **Other Considerations** * The benchmark uses `Math.floor(Math.random() * 1000)` to generate random numbers between 0 and 999. This can lead to repeated values in the arrays, which may affect performance. * The use of `!!` (double negation) around `Math.round(Math.random())` is a common pattern in JavaScript for converting a boolean value to a number. However, it's not necessary in this case, as the callback function will always receive either 0 or 1. **Library Usage** None of the test cases use any external libraries. The `find`, `filter`, and `indexOf` methods are built-in to JavaScript. **Special JS Features/Syntax** None of the benchmark code uses any special JavaScript features or syntax beyond standard JavaScript functionality. Now, let's look at some alternative approaches for this benchmark: 1. **Using a custom loop**: Instead of using the built-in `find`, `filter`, and `indexOf` methods, you could write a custom loop to iterate over the array elements and compare them to the desired value. 2. **Using a different data structure**: You could use other data structures like linked lists or heaps instead of arrays, which might affect the performance characteristics of the benchmark. 3. **Adding more test cases**: You could add additional test cases to cover other scenarios, such as finding an element that satisfies a more complex condition or filtering out elements based on multiple criteria. Keep in mind that these alternative approaches would likely change the nature of the benchmark and its results, so it's essential to validate the results using multiple methods.
Related benchmarks
Some vs. Filter vs. findIndex
Some vs. Filter vs. indexOf vs Find
Comments
Confirm delete:
Do you really want to delete benchmark?