ウェブ家の備忘録

ウェブデザイナーの備忘録

JavaScriptでswitch(true)を使うのはif文と比べて可読性悪いから止めといた方が良い


 下記は最近書いたswitch(true)とifをここに載せる用に改変したもの。処理内容は同一です。どちらが見やすいか見比べてみてほしいです。


//JS

//初期値
const nightStart = 21;
const nightEnd = 6;
const nowHour = new Date().getHours();
function night(){console.log("night process");}
function day(){console.log("day process");}

//switch
switch(true){
  case nightStart <= nowHour:
  case nightEnd > nowHour:
    console.log("night");
    night();
    break;
  default:
   console.log("not night");
    day();
    break;
}

//if
if(nightStart <= nowHour || nightEnd > nowHour){
  console.log("night");
  night();
}else{
  console.log("not night");
  day();
}


 switch(true)で条件分岐をまとめた場合、一見かっこいいんですが、読む文章がifと比べて地味に長くなって地味に行数がかさばります。
 switch信者にとってはswitch(true)使いたいのは分かりますが、switch(true)を使うよりもここは素直にifの方が疲れずに読めて良い気がします。
 switch文では11行、if文では7行。あんな端的な処理で4行も差が出てます。
 処理の入り組んでいる物だともっと差が明確になりそうですね。