Cannot read property 'toLowerCase' of undefinedのとき何を確認すべきか？

javascriptやjQuery、Vue.js、Reactなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。

Cannot read property 'toLowerCase' of undefined

これって何ぞや？日本語で直訳すると

"未定義のtoLowerCase"のプロパティが読み取れません

という意味になります。ではtoLowerCaseとは何でしょうか？答えはtoLowerCase()メソッドを呼び出そうとして起こるエラーで、toLowerCaseメソッドとは、文字列の値を小文字に変換して新しい文字列を返す働きを持ちます。

…とはいえ、ソースを確認しても、どこにもそのようなコードで思い当たる場所が存在しない、ということがよくあります。どうやらそのエラーは、イベントを実行した際に、**DOM要素に対する子要素が定義されていない（読み取れない）**ときに起こります。

#具体的に？
たとえば、このようなときに起こります。まずはサンプル1のjQueryにあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみます。

サンプル1

$('select').on("change",function(){
    val = $(this).val();
    console.log(val);
})

このイベント部分を、サンプル2のように関数化させます。

サンプル2

$('select').on("change",function(){
    myFunc();
})

myFunc = function(){
   val = $(this).val(); //thisが何なのか関数内で示されていない！
   console.log(val);
}

このときプルダウンメニューのchangeイベントが実行されたタイミングで、thisが何を指しているのかわからないので、上記のエラーが発生します。特に、プログラムの一部を関数化、外部ファイル化しようとしたときに、そのままコピーアンドペーストなんてことをしてしまうと、このエラーに遭遇する率が高いわけです。

この場合は、DOMオブジェクトも関数の引数に入れないといけません。

サンプル3

$('select').on(change,function(){
    sel = $(this);
    myFunc(sel);
})

myFunc = function(sel){
   val = sel.val();
   console.log(val);
}

これは一部の例ですが、このエラーが出たら、まずは、自分で定義した関数を見直してみることをオススメします。なお、ブラウザの開発ツールなどでエラー元を辿っても、複雑なライブラリのソース上（toLowerCaseメソッドの定義関数部分）に飛ばされてしまい、余計に混乱するだけです。

※類似のエラーもだいたい、代名詞部分の定義をプログラムが読み取れない、つまり具体的な値が示されていないときに起こります。借り物のプログラムをコピペしたときのセレクタ名が異なっていないか（同様にオブジェクトが読み取れない場合にはエラーが発生します）、関数の外部ファイルなどでthisの定義が曖昧になっていないか、などに注意を払いましょう。