JSで処理を書いているとif文の中にifを書くこともあると思います。
ただ、if文を入れ子にすると可読性が下がり、読みにくい・わかりにくいコードになっていくと思います。今回入れ子が発生し、それを解消するために行った工夫を記載します。
状況
かなりカンタンな例を作成しました。
１．名前と数値を設定
２．名前がメンバーと名付けた変数たちに含まれるか確認
３．含まれる場合は数値が0か+(プラス) か -(マイナス) かで条件分岐
コードで書くとこんな感じ
test.js
constname='yamada';constnum=100;//メンバーconstmember1='sato';constmember2='yamada';constmenber3='suzuki';//設定した名前がメンバー変数にあるか確認if(name===member1,name===member2,name===member3){//設定数値が 0 か +(プラス) か -(マイナス) かif(num===0){//0の場合}elseif(num>0){//+(プラス)の場合}else{//-(マイナス)の場合}}ifが入れ子になってます。
シンプルな内容なので入れ子でもまだわかるかとおもいますが、どの条件でどの処理をするのかがパッと見わかりにくいです。
解消後
ifが入れ子になっているときは、複数ある条件式をなんとか1つの条件式で記載できないか？と考えるのが有効だと教わりました！
そして解消後のコードがこちら
test.js
constname='yamada';constnum=100;//メンバーconstmember1='sato';constmember2='yamada';constmenber3='suzuki';//メンバーを配列化constlist=[member1,member2,member3];if(name.includes(list)&&num===0){//設定した名前がメンバー変数にある かつ 設定数値が0の場合}elseif(name.includes(list)&&num>0){//設定した名前がメンバー変数にある かつ 設定数値が+(プラス)の場合}elseif(name.includes(list)&&num<0){//設定した名前がメンバー変数にある かつ 設定数値が-(マイナス)の場合}else{//設定した名前がメンバー変数にない}こちらにすることでどの条件で分岐したものがなんの処理を行っているのかわかりやすくなったと思います！
ポイントとして、確認したい変数たちを配列変数に入れて条件式に .includesを使用することでまとめました！
まとめ
少しずつコードが書けるようになってくると、やりたいことは実現できるが、余計な動作も記載してしまっている、可読性が悪い、コードが長すぎて時間がかかる、などまだまだプログラミングは奥が深く、課題は山積みだと実感します。。！！
少しずつ綺麗で可読性が高くわかりやすいコードが書けるように勉強していきたいとおもいます。