🔎 Array.prototype.find() Polyfill

jspolyfillsmedium

The find() method returns the first element in an array that satisfies a provided testing function. If no element matches, it returns undefined. This polyfill supports the optional thisArg parameter for binding context.

✅ Implementation

Array.prototype.customFind = function(callbackFn, thisArg) {
    // Iterate through the array and execute the callback function
    for (let i = 0; i < this.length; i++) {
        // Call the callback function with the current element, index, and array
        // .call() is used to explicitly set 'this' inside the callback
        if (callbackFn.call(thisArg, this[i], i, this)) {
            return this[i]; // Return the first matching element
        }
    }

    return undefined; // Return undefined if no element matches
};

// Example usage:
const array = [5, 12, 8, 130, 44];

// Using customFind to find the first element greater than 10
const found = array.customFind(element => element > 10);

console.log(found); // Output: 12

How It Works:

Iteration : The customFind method iterates through the array using a for loop.
Callback Execution : For each element, it calls the provided callbackFn with the current element, its index, and the array.

If the callback returns a truthy value, the method immediately returns that element.

Optional thisArg : If provided, thisArg is used to bind this inside the callback function using .call(thisArg, this[i], i, this).
No Match : If no element satisfies the condition in callbackFn, it returns undefined.

Example:

customFind(element => element > 10) returns the first element greater than 10, which is 12.
If no element matches, such as customFind(element => element > 200), it returns undefined.

Why Use `.call(thisArg, ...)`?

Explicit this Binding : The .call(thisArg, ...) ensures that the this value inside the callback is explicitly set to thisArg. This is crucial when thisArg is provided and the callback relies on it. Without .call(), the this value could be undefined (in strict mode) or the global object (non-strict mode), leading to unexpected results. By using .call(thisArg, ...), we guarantee that thisArg is used as the context inside the callback.

Example of `.call()` in Action:

function printThis() {
    console.log(this); // Logs the value of `this`
}

const obj = { name: 'Alice' };

// Using `.call()` to set `this` to `obj`
printThis.call(obj); // Logs: { name: 'Alice' }

Summary:

.call(thisArg, ...) allows explicit control over the this context inside the callback.
Without .call(), the this context inside the callback may not behave as expected, especially when thisArg is provided.

Quick Quiz

Test your understanding with 3 quick questions

Q1What does `[5, 12, 8, 130].customFind(x => x > 10)` return?

Q2What does `find()` return when no element matches?

Q3Why is `.call(thisArg, ...)` used in the find polyfill?

✅ Implementation

Array.prototype.customFind = function(callbackFn, thisArg) {
    // Iterate through the array and execute the callback function
    for (let i = 0; i < this.length; i++) {
        // Call the callback function with the current element, index, and array
        // .call() is used to explicitly set 'this' inside the callback
        if (callbackFn.call(thisArg, this[i], i, this)) {
            return this[i]; // Return the first matching element
        }
    }

    return undefined; // Return undefined if no element matches
};

// Example usage:
const array = [5, 12, 8, 130, 44];

// Using customFind to find the first element greater than 10
const found = array.customFind(element => element > 10);

console.log(found); // Output: 12

How It Works:

Iteration : The customFind method iterates through the array using a for loop.

Callback Execution : For each element, it calls the provided callbackFn with the current element, its index, and the array.

If the callback returns a truthy value, the method immediately returns that element.

Optional thisArg : If provided, thisArg is used to bind this inside the callback function using .call(thisArg, this[i], i, this).

No Match : If no element satisfies the condition in callbackFn, it returns undefined.

Example:

customFind(element => element > 10) returns the first element greater than 10, which is 12.

If no element matches, such as customFind(element => element > 200), it returns undefined.

Why Use .call(thisArg, ...)?

Explicit this Binding : The .call(thisArg, ...) ensures that the this value inside the callback is explicitly set to thisArg. This is crucial when thisArg is provided and the callback relies on it. Without .call(), the this value could be undefined (in strict mode) or the global object (non-strict mode), leading to unexpected results. By using .call(thisArg, ...), we guarantee that thisArg is used as the context inside the callback.

Example of .call() in Action:

function printThis() {
    console.log(this); // Logs the value of `this`
}

const obj = { name: 'Alice' };

// Using `.call()` to set `this` to `obj`
printThis.call(obj); // Logs: { name: 'Alice' }

Summary:

.call(thisArg, ...) allows explicit control over the this context inside the callback.

Without .call(), the this context inside the callback may not behave as expected, especially when thisArg is provided.

Quick Quiz

Test your understanding with 3 quick questions

Q1What does `[5, 12, 8, 130].customFind(x => x > 10)` return?

Q2What does `find()` return when no element matches?

Q3Why is `.call(thisArg, ...)` used in the find polyfill?

🔎 Array.prototype.find() Polyfill

✅ Implementation

How It Works:

Example:

Why Use .call(thisArg, ...)?

Example of .call() in Action:

Summary:

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

🔎 Array.prototype.find() Polyfill

✅ Implementation

How It Works:

Example:

Why Use .call(thisArg, ...)?

Example of .call() in Action:

Summary:

Continue Reading

🛑 AbortController: Canceling Async Operations in JavaScript

🔒 Closures in JavaScript — The Complete Guide

📦 Understanding ES6 Modules in JavaScript

Why Use `.call(thisArg, ...)`?

Example of `.call()` in Action:

Why Use `.call(thisArg, ...)`?

Example of `.call()` in Action: