zukucode
主にWEB関連の情報を技術メモとして発信しています。
JavaScript

JavaScript switch文の基本的な使い方と注意点

JavaScriptのswitch文の基本的な使い方を紹介します。

JavaScript If,else,else if文の基本的な使い方でif文の基本的な使い方について説明しましたが、else ifの数が増えてくると、可読性や保守性が悪くなってしまいます。

例えば以下のような分岐処理で、比較対象をaではなくa + 1やbなどに条件を変更したい場合、else ifの箇所をすべて修正する必要があります。

var a = 2;
if (a == 1) {
  console.log('aは1です');
} else if (a == 2) {
  console.log('aは2です');
} else if (a == 3) {
  console.log('aは3です');
} else if (a == 4) {
  console.log('aは4です');
}

else ifの数が多いときはswitch文を使用することが多いです。

上記の処理をswitchに置き換えると以下のようになります。

aを基準に各caseの値と比較を行っていきます。

どのcaseにも当てはまらなかった場合はdefaultの処理が実行されます。

var a = 2;
switch (a) {
  case 1:
    console.log('aは1です');
    break;
  case 2:
    console.log('aは2です');
    break;
  case 3:
    console.log('aは3です');
    break;
  case 4:
    console.log('aは4です');
    break;
  default:
    console.log('aは1,2,3,4以外です');
    break;
}

// 実行結果
// aは2です

switch 値Aとcase 値Bの値がイコールの場合に以降の処理が実行されます。

ここでいうイコールとは、型も含めて完全に一致する場合を指します。

例えば以下のようにaが文字列の場合、caseの値も文字列にする必要があります。

var a = '2'; // 文字列
switch (a) {
  case 1:
    console.log('aは1です');
    break;
  case 2: // 数値のため不一致
    console.log('aは2です');
    break;
  case '2':
    console.log('aは文字列の2です');
    break;
  case 3:
    console.log('aは3です');
    break;
  case 4:
    console.log('aは4です');
    break;
  default:
    console.log('aは1,2,3,4以外です');
    break;
}

// 実行結果
// aは文字列の2です

if文の比較でもswitch文と同じように型まで含めて比較したい場合は以下のようイコールを3つ使用します。

if (a === 2) {
    console.log('aは数字の2です。');
}
if (a !== 2) {
    console.log('aは数字の2ではありません。');
}

JavaScriptではcase処理の最後にbreakコマンドを追加しなければ次のcase処理も実行されてしまいます。

以下の例では、case 2の処理の最後にbreakがないため、以降のcase 3,case 4,defaultの処理も実行されてしまいます。

breakがない場合
var a = 2;
switch (a) {
  case 1:
    console.log('aは1です');
  case 2:
    console.log('aは2です');
  case 3:
    console.log('aは3です');
  case 4:
    console.log('aは4です');
  default:
    console.log('aは1,2,3,4以外です');
}

// 実行結果
// aは2です
// aは3です
// aは4です
// aは1,2,3,4以外です
JavaScript

関連記事