The findIndex() method returns the index of the first element that satisfies the provided testing function, or -1 if none is found.
π‘ How It Works
- Iterate through the array: Loop over each element in the array.
- Apply the callback function: For each element, invoke the provided callback function.
- Return the index: If the callback returns a truthy value for the current element, return its index.
- Return
-1: If no element matches the condition, return-1.
Implementation:
Array.prototype.customFindIndex = function(callbackFn, thisArg) { // Iterate over the array using a for loop for (let i = 0; i < this.length; i++) { // Call the callback function with the current element, index, and array // .call() is used to bind the this value inside the callback function if (callbackFn.call(thisArg, this[i], i, this)) { return i; // Return the index of the first matching element } } return -1; // Return -1 if no element matches the condition }; // Example usage: const array = [5, 12, 8, 130, 44]; // Find the index of the first element greater than 10 const foundIndex = array.customFindIndex(element => element > 10); console.log(foundIndex); // Output: 1 (because 12 is the first element greater than 10)
Explanation of How It Works:
-
Iteration over the array:
- The method iterates through each element of the array using a
forloop. The loop will go from index0tothis.length - 1.
- The method iterates through each element of the array using a
-
Executing the callback function:
- For each element, the provided
callbackFnis executed with three arguments:this[i](the current element),i(the index of the element), andthis(the array itself). - The callback function should return a truthy value for the matching element. If it does, the method immediately returns the index
i.
- For each element, the provided
-
Return
-1if no match is found:- If the loop completes without finding a match, the method returns
-1.
- If the loop completes without finding a match, the method returns
Example Walkthrough:
element => element > 10: The callback function checks if an element is greater than10.- For the array
[5, 12, 8, 130, 44], it will return the index1, because12is the first element greater than10.
Edge Case:
- If no element satisfies the condition (e.g., if you search for elements greater than
200in the same array), the method will return-1.
console.log(array.customFindIndex(element => element > 200)); // Output: -1
Summary:
- This custom implementation mimics the behavior of the native
findIndexmethod. - It uses a
forloop to iterate over the array andcallbackFn.call()to ensure the correct context for thethisinside the callback function. - The method returns the index of the first matching element or
-1if no element satisfies the condition.
Quick Quiz
Test your understanding with 3 quick questions
Q1What does `[5, 12, 8, 130].customFindIndex(x => x > 10)` return?
Q2What does `findIndex()` return when no element matches?
Q3What is the key difference between `find()` and `findIndex()`?