omachizura

仕事メモ、役に立ったスキルをまとめています。


javascriptでswitch文を使うときの注意点

if文の条件がたくさんあるときはswitch文、vb.netではSelect Caseを使用することがあると思います。

javascriptにもswitch文が用意されていますが、気をつけなければならないことがあります。

型をあわせる必要がある

switch文の比較は型まで完全に一致していなければその条件がtrueと判定されません。(===で判定される)

例えば以下のようなswitch文では思い通りの結果になりません。

document.getElementById('hidA').value = '1';
switch (document.getElementById('hidA').value){
  case 0:
    alert('a');
    break;
  case 1:
    alert('b');
    break;
  case 2:
    alert('c');
    break;
}

document.getElementById('hidA').valueは文字列型なので、caseで数値型を条件にしてしまうと、条件に合致しません。

document.getElementById('hidA').value = '1';
switch (document.getElementById('hidA').value){
  case '0':
    alert('a');
    break;
  case '1':
    alert('b');
    break;
  case '2':
    alert('c');
    break;
}

必ずbreakをつける

caseに合致した場合の処理の最後には必ずbreakを記述する必要があります。

document.getElementById('hidA').value = '1';
switch (document.getElementById('hidA').value){
  case '0':
    alert('a');
  case '1':
    alert('b');
  case '2':
    alert('c');
}
//「b」のアラートだけでなく、「c」のアラートも表示されてしまいます

caseで合致した場合、合致した処理以降の処理をすべて実行します。なのでbreakをつけてswitch文の処理を終了させなければ、case '2'の処理も実行されてしまいます。

breakがなくても文法上はエラーにはならないので、意図的にbreakを付けない場合もありますが、わかりずらいので常にbreakをつけることをおすすめします。