1. BRSF
Changes in title
-Cannot read property 'toLowerCase' of undefinedって何だ?
+Cannot read property 'toLowerCase' of undefinedのとき何を確認すべきか?
Changes in body
Source | HTML | Preview
@@ -1,50 +1,52 @@
javascriptやjQueryなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。
**Cannot read property 'toLowerCase' of undefined**
これって何ぞや?日本語で直訳すると
**"toLowerCase"のプロパティが定義されていません**
-という意味になる。ではtoLowerCaseとは何か?答えは**DOM要素に対する子要素**(toLowerとは低階層のこと)のことで、それが定義されていないときに起こる
+という意味になる。ではtoLowerCaseとは何か?答えはtoLowerCase()メソッドを呼び出そうとして起こるエラーで、toLowerCaseメソッドとは、文字列の値を小文字に変換して新しい文字列を返す働きを持つ
-#どういうときに発生するか
+…なのだが、ソースを確認しても、どこにもそのようなコードで思い当たる場所が存在しない、ということがよくある。どうやらそのエラーは、**DOM要素に対する子要素が定義されていない(読み取れない)**ときにも起こる。
+
+#具体的に
たとえば、このようなときに起こる。まずはサンプル1にあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみる。
```javascript:サンプル1
$('select').on(change,function(){
val = $(this).find('option:selected').val();
console.log(val);
})
```
このイベント部分を、サンプル2のように関数化させる。
```javascript:サンプル2
$('select').on(change,function(){
myFunc();
})
myFunc = function(){
val = $(this).find('option:selected').val();
console.log(val);
}
```
このとき、$(this)が何を指しているのかわからないので、上記のエラーが起きる。特に、関数を外部ファイル化しようとしたときに、そのままコピペなんてことをしてしまうと、このエラーに遭遇する率が高い。
この場合は、DOMオブジェクトも関数の引数に入れないといけない。
```javascript:サンプル3
$('select').on(change,function(){
sel = $(this);
myFunc(sel);
})
myFunc = function(sel){
val = sel.find('option:selected').val();
console.log(val);
}
```
-これは一部の例だが、このように、このエラーが出たら、まずは、とりわけ自分で定義した関数を見直してみるのをオススメする。なお、ブラウザの開発ツールなどで、エラー元を辿っても、複雑なjQueryソース上に飛ばされてしまい、余計に混乱するだけである。
+これは一部の例だが、このように、このエラーが出たら、まずは、自分で定義した関数を見直してみるのをオススメする。なお、ブラウザの開発ツールなどで、エラー元を辿っても、複雑なjQueryソース上、toLowerCaseメソッドの定義関数部分に飛ばされてしまい、余計に混乱するだけである。