CrackFrontendCF
Resources
Practice
CrackFrontend

Your guide to mastering frontend interviews

Resources

LibraryPracticeDonate

Company

About UsContact

Legal

Privacy PolicyTerms of Service

Built with ❀️ by Tushar Khanna

CrackFrontendCF
Resources
Practice

πŸ”’ Array.prototype.findIndex() Polyfill

The findIndex() method returns the index of the first element satisfying a test function, or -1 if none found. Essential for locating items.

The method returns the index of the first element that satisfies the provided testing function, or if none is found. -- πŸ’‘ How It Works 1. Iterate through the array: Loop over each element in the array. 2. Apply the callback function: For each element, invoke the provided callback function. 3. Return the index: If the callback returns a truthy value for the current element, return its index. 4. Return : If no element matches the condition, return . Implementation: Explanation of How It Works: 1. Iteration over the array: The method iterates through each element of the array using a loop. The loop will go from index to . 2. Executing the callback function: For each element, the provided is executed with three arguments: (the current element), (the index of the element), and (the array itself). The callback function should return a truthy value for the matching element. If it does, the method immediately returns the index . 3. Return if no match is found: If the loop completes without finding a match, the method returns . Example Walkthrough: *: The callback function checks if an element is greater than . For the array , it will return the index , because is the first element greater than . Edge Case: If no element satisfies the condition (e.g., if you search for elements greater than in the same array), the method will return . Summary: This custom implementation mimics the behavior of the native method. It uses a loop to iterate over the array and to ensure the correct context for the inside the callback function. The method returns the index of the first matching elementor if no element satisfies the condition. -- <!-quiz-start --Q1: What does return? [ ] 12 [x] 1 [ ] 3 [ ] [1, 3] Q2: What does return when no element matches? [x] -1 [ ] undefined [ ] null [ ] false Q3: What is the key difference between and ? [ ] find() is faster [ ] findIndex() creates a new array [x] find() returns the element, findIndex() returns the index [ ] findIndex() can only work with numbers <!-quiz-end --
JavaScriptPolyfills
🎯 Array.prototype.at() Polyfill
medium
βœ… Array.prototype.every() Polyfill
medium
πŸ”² Array.prototype.fill() Polyfill
medium
πŸ” Array.prototype.filter() Polyfill
medium
πŸ”Ž Array.prototype.find() Polyfill
medium
πŸ”’ Array.prototype.findIndex() Polyfill
medium
πŸ”™ Array.prototype.findLast() Polyfill
medium
πŸ”™ Array.prototype.findLastIndex() Polyfill
medium
πŸ“‹ Array.prototype.flat() Polyfill
medium
πŸ” Array.prototype.includes() Polyfill
medium
πŸ”’ Array.prototype.indexOf() Polyfill
medium
βœ… Array.isArray() Polyfill
medium
πŸ—ΊοΈ Array.prototype.map() Polyfill
hard
βž– Array.prototype.pop() Polyfill
medium
βž• Array.prototype.push() Polyfill
easy
πŸ”„ Array.prototype.reduce() Polyfill
medium
πŸ”„ Array.prototype.reverse() Polyfill
hard
⬅️ Array.prototype.shift() Polyfill
hard
πŸ”˜ Array.prototype.some() Polyfill
medium
πŸ”€ Array.prototype.sort() Polyfill
hard
➑️ Array.prototype.unshift() Polyfill
hard
πŸ“ž Function.prototype.apply() Polyfill
medium
πŸ”— Function.prototype.bind() Polyfill
hard
πŸ“ž Function.prototype.call() Polyfill
medium
6 of 24
LibraryJavaScriptPolyfills21 of 61

πŸ”’ Array.prototype.findIndex() Polyfill

jspolyfillsmedium

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

  1. Iterate through the array: Loop over each element in the array.
  2. Apply the callback function: For each element, invoke the provided callback function.
  3. Return the index: If the callback returns a truthy value for the current element, return its index.
  4. 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:

  1. Iteration over the array:

    • The method iterates through each element of the array using a for loop. The loop will go from index 0 to this.length - 1.
  2. Executing the callback function:

    • For each element, the provided callbackFn is executed with three arguments: this[i] (the current element), i (the index of the element), and this (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.
  3. Return -1 if no match is found:

    • If the loop completes without finding a match, the method returns -1.

Example Walkthrough:

  • element => element > 10: The callback function checks if an element is greater than 10.
  • For the array [5, 12, 8, 130, 44], it will return the index 1, because 12 is the first element greater than 10.

Edge Case:

  • If no element satisfies the condition (e.g., if you search for elements greater than 200 in 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 findIndex method.
  • It uses a for loop to iterate over the array and callbackFn.call() to ensure the correct context for the this inside the callback function.
  • The method returns the index of the first matching element or -1 if 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()`?

Continue Reading

CrackFrontend

Your guide to mastering frontend interviews

Resources

LibraryPracticeDonate

Company

About UsContact

Legal

Privacy PolicyTerms of Service

Built with ❀️ by Tushar Khanna