あれ、なんか$(this)が動かないな...

大学院生の備忘録シリーズ 第一弾

JS初心者が調子乗ってアロー関数を使っていた時に起きたエラーとその対応です．

問題のコードはこちら

sample

$('select').on('change', ()=>{
    let hoge= $(this).val()
    Function(hoge)
})

実行すると

Cannot read properties of undefined (reading 'toLowerCase')

なんだこれ？
となったのでいつものごとく先人たちの記事を調べてまずたどり着いた記事がこれ

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

なにか定義されていないらしい．でも色々修正してもどうにもならない......

いろいろ時間をかけてたどり着いたのがアロー関数()=>{}といつもの関数function(){}の違いを解説していただいている次の記事

JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。

結論

$(this)はアロー関数()=>{}では定義されていない！
さらに外側に定義されていればそれがスコープされるらしい．
仕様なのでfunction(){}の方に直そうね．とのこと