初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】条件分岐switchの使い方

【JavaScript】switch シンプルな条件分岐

switchは、指定した変数の値が、どれと一致するかによって処理を分岐させることができます。
使い勝手的には、ifの簡易版のようなもの。

僕自身、使用頻度は低いですが、シンプルな条件分岐をさせる時に便利です。

ifについてはこちら

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。

それでは本文へ、レッツゴー!

基本構文

基本構文です。

switch(変数名){
    case 値:
    処理内容;
    break;

    case 値:
    処理内容;
    break;

    default:
    処理内容;
}

変数の値が、caseの値に該当したとき、その直下の処理が実行されます。
そしてbreakで、処理を強制的に終了させます。

どのcaseにも該当しなかった場合、default直下の処理が実行されます。

サンプルコード

<script>

const number = 80;

switch(number){
    // 100の場合
    case 100:
    console.log('100です');
    break;

    // 90の場合
    case 90:
    console.log('90です');
    break;

    // どのケースにも該当しない場合
    default:
    console.log('90でも100でもありません。');
}

</script>