Implement a custom function similar to Array.prototype.includes() method using JavaScript

We need to create a custom JavaScript function that mimics the behavior of Array.prototype.includes(). This function should check if a value exists in an array and return a boolean result.

Problem

We are required to write a JavaScript function that lives on the prototype object of Array. It must take in a literal value, and return true if that value is present in the array it is being called upon, false otherwise.

Basic Implementation

Here's a simple implementation using a for loop to iterate through the array:

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const num = 6;

Array.prototype.customIncludes = function(searchValue) {
    for (let i = 0; i < this.length; i++) {
        const element = this[i];
        if (searchValue === element) {
            return true;
        }
    }
    return false;
};

console.log(arr.customIncludes(num));
console.log(arr.customIncludes(10));

true
false

Enhanced Implementation with fromIndex Support

The native includes() method supports a second parameter fromIndex. Let's add this functionality:

Array.prototype.customIncludesAdvanced = function(searchValue, fromIndex = 0) {
    // Handle negative fromIndex
    let startIndex = fromIndex < 0 ? Math.max(0, this.length + fromIndex) : fromIndex;
    
    for (let i = startIndex; i < this.length; i++) {
        if (searchValue === this[i]) {
            return true;
        }
    }
    return false;
};

const testArr = ['apple', 'banana', 'cherry', 'date'];

console.log(testArr.customIncludesAdvanced('banana'));      // from index 0
console.log(testArr.customIncludesAdvanced('banana', 2));   // from index 2
console.log(testArr.customIncludesAdvanced('cherry', -2));  // from index 2 (negative)

true
false
true

Handling Special Cases

The native includes() method handles NaN values specially. Here's a more complete implementation:

Array.prototype.customIncludesComplete = function(searchValue, fromIndex = 0) {
    let startIndex = fromIndex < 0 ? Math.max(0, this.length + fromIndex) : fromIndex;
    
    for (let i = startIndex; i < this.length; i++) {
        const element = this[i];
        // Handle NaN case (NaN !== NaN in JavaScript)
        if (searchValue !== searchValue && element !== element) {
            return true;
        }
        if (searchValue === element) {
            return true;
        }
    }
    return false;
};

const specialArray = [1, NaN, 'hello', undefined, null];

console.log(specialArray.customIncludesComplete(NaN));
console.log(specialArray.customIncludesComplete(undefined));
console.log(specialArray.customIncludesComplete(null));

true
true
true

Comparison with Native includes()

Performance Test

const largeArray = Array.from({length: 1000}, (_, i) => i);

// Test our custom function
console.time('Custom Implementation');
largeArray.customIncludes(999);
console.timeEnd('Custom Implementation');

// Test native includes
console.time('Native includes');
largeArray.includes(999);
console.timeEnd('Native includes');

Conclusion

Creating a custom includes() method helps understand how array searching works internally. While the basic implementation is straightforward, handling edge cases like NaN and negative indices makes it more robust and comparable to the native method.