HTMLファイルに記述することなくjavascrptで動的に要素を作り出す場合どうしてもjs内での記述量が増えます。
記述量が増えてくるとどうしてもコードが汚くなったりしがちで、わかりやすく書けないものかと思っていたときに早期リターンという書き方を意識したら割と良かったのでまとめておきます。
javascriptの早期リターンとは
複数のfunctionなどが連続するなど他の関数を使いまわす必要が生じたときにreturnを小刻みにおいてあげることで可読性が上がるとともに関数を呼び出しやすくなります。 returnを早め早めにおいてあげることですっきりしたコードを書く。 これが早期リターンです。
Javascriptのreturn
return文を使うと関数内で処理をした結果を「戻り値」として返すことができ、その値を使ってさらに別の処理を続けることが出来ます。 関数は「return」を使わずに処理を行ったらそのまま終了となります。
例）
new: function(){ const element=documentgetElementById("container"); }
この場合elementはこの関数が終わった時点で使えなくなります。
NG例）
new: function(){ element=documentgetElementById("container"); }, next:function(){ const newelement = this.new().contentWindow.document.querySelector("box") }
上記の書き方だとnewの関数内だけで変数elementが終了しているので次の関数nextで変数elementは使えないのです。 （使えないというより消えてしまっている）
そこで早期リターン！！
上記コードのnewというfunctionの中に早期リターンを置いてあげましょう。
new: function(){ element=documentgetElementById("container"); return element; }, next:function(){ const newelement = this.new().contentWindow.document.querySelector("box") }
こうするとelementが次のnextという関数内でも使えるようになります。 今回は２つしか関数が登場していませんが、もっと関数が登場してくる際などはこの早期リターンが大活躍します。
番外編メンバ変数
今回は早期リターンを使って変数がどこでも使えるようにしましたが、おなじような処理をするためにメンバ変数という考え方もあります。
例） var FUNCTION{ //メンバ変数 content:"", NEW: fnction{ this content = document.getElementById("container"); } }
メンバ変数contentは次からthis contentを使うことで使いまわすことができます。