JavaScriptでArray.prototype.includes()と同等のカスタム関数を自作する方法

JavaScriptでは、Array.prototype.includes()メソッドを使うことで、配列に特定の値が含まれているかどうかを簡単に判定できます。しかし、このメソッドの内部動作を理解するために、同じ機能を持つカスタム関数を自作してみるのは非常に良い学習になります。

課題

JavaScript関数を1つ作成し、それをArray.prototypeオブジェクトに登録します。この関数はリテラル値を1つ引数として受け取り、その値が呼び出し元の配列内に存在する場合はtrue、存在しない場合はfalseを返す必要があります。

実装コード

以下がその実装例です。

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

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

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

実行結果

true

コードの解説

このカスタム関数は、以下の手順で動作します。

1. プロトタイプへの追加： Array.prototype.customIncludesとして定義することで、すべての配列インスタンスからこのメソッドを呼び出せるようになります。

2. 線形探索： this.lengthまでループを回し、配列の各要素を順番に取り出して確認していきます。thisは、メソッドを呼び出した配列自身（この場合はarr）を参照します。

3. 厳密等価比較： 値の一致判定には===（厳密等価演算子）を使用しています。これにより、"6"のような文字列と6のような数値が誤って一致すると判断されることを防ぎます。実際、ネイティブのincludes()もSameValueZeroアルゴリズムによる厳密な比較を行います。

4. 結果の返却： 一致する要素が見つかった時点ですぐにtrueを返し、最後まで見つからなかった場合はfalseを返します。

注意点

組み込みオブジェクトのプロトタイプを拡張する際には注意が必要です。独自のメソッドを追加すると、将来のJavaScriptのバージョンで同名のネイティブメソッドが追加された場合に競合が発生したり、サードパーティライブラリとの互換性問題が起きる可能性があります。そのため、実際の開発ではObject.defineProperty()を使って列挙不可（enumerable: false）として定義するか、そもそもプロトタイプ拡張を避けて通常のユーティリティ関数として実装することが推奨されます。