In this post we cover findIndex vs indexOf in JavaScript
findIndex vs indexOf in JavaScript
The primary difference between Array.prototype.findIndex and Array.prototype.indexOf in JavaScript is that indexOf accepts a number as an argument whereas findIndex accepts a callback.
Aside from that both are methods to find the index of a value in a given array.
By passing the value directly into indexOf it will return the index of that value when it finds it.
By passing a callback into findIndex it provides a way to find the index of a value in an array for more complex use cases.
Here are some examples:
1const someArray = ["a", "b", "c"];
2
3// when the value is found:
4someArray.indexOf("b"); // 1
5someArray.findIndex(item => item === "b"); // 1
6
7// when the value is not found:
8someArray.indexOf("d"); // -1
9someArray.findIndex(item => item === "d"); // -1JavaScript
JavaScript is a programming language that is primarily used to help build frontend applications.
It has many uses, such as making network requests, making dynamic or interactive pages, creating business logic and more.
VanillaJS
VanillaJS is a term often used to describe plain JavaScript without any additions, libraries or frameworks.
In other words when writing with VanilliaJS you are simply writing JavaScript as it comes out of the box.
Array.prototype.indexOf
Array.prototype.indexOf is a method that can be used to find the index of a given value within an array.
If successful the method will return the index, if not then the method will return -1.
The method indexOf accepts a value as an argument. For more complex cases, such as finding an object, <a href="/definition/array.prototype.findindex/">Array.prototype.findIndex</a> might be needed.
Array.prototype.findIndex
Array.prototype.findIndex is a method used to find the index of a value within an array.
It accepts a callback as an argument where the callback must return a boolean value, true if the value is the one being searched for, or false if not.
If the value is found, then the method will return the index, otherwise it will return -1 to indicate that the value was not found.
The callback will be provided with each item in the array until the callback returns true.
This method works well for more complex use cases such as searching for objects within an array, but for simpler cases Array.prototype.indexOf might be another good option.
Further resources
Related topics
How to use React Router with an optional path parameterHow to continue in a JavaScript forEach loopHow to redirect in ReactJSHow to compare two dates in JavaScriptHow to make a loop wait in JavaScriptHow to get postcodes from Google Places and Google Maps with JavaScriptHow to calculate the number of days between two dates in JavaScriptHow to wait for all promises to resolve in JavaScriptHow to trim and remove leading zeros in JavaScriptIs JavaScript forEach async?How to get the index in a forEach loop in JavaScriptHow to sort an array of objects by property value in JavaScriptHow to get the JavaScript forEach key value pairs from an objectHow to get the last segment of a URL in JavaScriptHow to split an array in two in JavaScriptHow to get the selected value in dropdown list using JavaScriptHow to rename a destructured variable in JavaScriptHow to sort an array by date in JavaScriptWhat is the difference between useMemo and useCallback?How to break a JavaScript forEach loopHow to get yesterdays date in JavaScriptHow to initialize an array with values in JavaScriptHow to import and export a module on the same line in JavaScriptHow to get the month name in JavaScriptNullish Coalescing vs OR - JavaScript operators (?? vs ||)What is hydration in React based applications?What do multiple arrow functions mean in JavaScript?What are Expo modules in React Native
Save code?
