JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのswitchステートメント内でreturnを使う方法｜サンプルコード付きで解説

switchステートメント内でreturnステートメントは使えるのか？

結論から言うと、switchステートメントが関数の中にある場合は、returnステートメントを含めることができます。returnが実行されると、その時点で関数の処理が終了し、switchステートメントで指定された値が呼び出し元へ返されます。そのため、switchステートメントより後ろに記述したコードは実行されません。

さらに、returnは関数自体を抜ける働きを持つため、各caseの末尾にbreakステートメントを記述する必要がない点も見逃せません。breakの書き忘れによる意図しないフォールスルー（次のcaseへの処理の漏れ）を防ぐことができ、コードがより安全かつ簡潔になります。

サンプルコード

以下は、入力された数値（1〜7）に応じて対応する曜日を返す関数の例です。switchステートメントの各caseブロックで直接returnしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
      font-size: 20px;
      font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript switchステートメント内のreturn</h1>
曜日番号（1〜7）を入力：<input type="text" class="day" /><button class="Btn">
CHECK
</button>
<div style="color: green;" class="result"></div>
<h3>
上のボタンをクリックすると、対応する曜日が表示されます
</h3>
<script>
    let dayVal = document.querySelector(".day");
    let resEle = document.querySelector(".result");
    function returnDay(val) {
        switch (val) {
            case 1:
                return "月曜日です";
            case 2:
                return "火曜日です";
            case 3:
                return "水曜日です";
            case 4:
                return "木曜日です";
            case 5:
                return "金曜日です";
            case 6:
                return "土曜日です";
            case 7:
                return "日曜日です";
            default:
                return "1〜7の値を入力してください";
        }
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = returnDay(parseInt(dayVal.value));
    });
</script>
</body>
</html>

なお、テキストボックスから取得した入力値は文字列として扱われるため、parseInt()で数値に変換してから関数に渡しています。switchのcaseラベルとの比較は厳密等価（===）で行われるため、この変換処理が重要になります。

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

JavaScriptのswitchステートメント内でreturnを使う方法｜サンプルコード付きで解説

テキストボックスに1〜7のいずれかの数値を入力し、CHECKボタンをクリックすると、その数値に対応する曜日の結果が緑色の文字で表示されます。

JavaScriptのswitchステートメント内でreturnを使う方法｜サンプルコード付きで解説

範囲外の数値や空欄のまま実行した場合は、default節のreturnが呼ばれ、「1〜7の値を入力してください」というメッセージが表示されます。このように、switch＋returnの組み合わせを使えば、条件ごとの戻り値を明快に定義できます。

  1. JavaScriptのswitch文は厳密比較（===）のみ！型変換されない理由と対処法を実例で解説

    JavaScriptのswitch文は常に厳密比較（===）で判定される JavaScriptのswitch文では、switch式の値と各caseラベルの比較に厳密等価演算子（===）だけが使用されます。つまり、==のような暗黙的な型変換（型強制）は一切行われません。そのため、見た目が同じ値でもデータ型が異なる限り一致とはみなされず、該当するcaseがひとつも見つからなければ、直ちにdefault節が実行されます。 この挙動は、フォーム入力など「必ず文字列として取得される値」を扱う場面で特に重要です。input要素のvalueプロパティは常に文字列を返すため、数値リテラルのcase（case

  2. JavaScriptのswitchステートメントで共通コードブロックを実装する方法を解説

    JavaScriptのswitchステートメントは、1つの式の評価結果に応じて複数の処理を振り分けるための制御構文です。各caseに対応する処理を記述し、break文でブロックを抜けるのが基本的な書き方となります。以下は、switchステートメントを使って共通コードブロックを実装するサンプルコードです。1〜7の数値を入力すると、対応する曜日を表示するシンプルなWebページを作成します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=