後輩のコードをレビューしての観点 - 1 の続き。
list とか search とか、そういった ID を HTML に振ったり、そういった名前のクラスを作ったりしない。何のリストなのか、何の検索なのかをわかるように記述することで意図を伝えると同時に名前の重複を避けることが可能となる。後者については「名前空間 (namespace)」でも検索。
JavaScript で this を使うと、その時点での文脈で this が何を指しているのかわからなくなりがちである。以下の3つの解決法がある。ほとんどの場面では最後の手段が楽だし考えることが少ない。
1つめに、this を使う関数を bind してしまい、this が何になるのか指定する。
Function.prototype.bind() - JavaScript | MDN
2つめに、this が何なのかわかっている文脈で this を適当な変数に代入 (多くの場合、 self を定義し、そこに代入する) それを使う。
JavaScript - [JS] var self = this の意味は？(15662)｜teratai
最後の解決策として、function を使わない。関数を書くときに function の代わりにアローで記述する。アローの内部のコンテキスト (this が何を指すのか) はアローの外側と変わらないので this がコロコロ変わることによる混乱は少なくなる。
アロー関数 - JavaScript | MDN
ただいまコメントを受けつけておりません。