switch文で、case以降の処理内容を正常に動作させたいです。

前提

JavaScriptで、変数xが10より小さい場合・10と等しい場合・10より大きい場合に、
コンソールにそれぞれメッセージを表示させるスクリプトを開発しています。

実現したいこと

xが10より小さい場合に、「xは10より小さい」と表示させたい。
xが10の場合に、「xは10」と表示させたい。

発生している問題・エラーメッセージ

console.log(x)の結果と「xは10より大きい」だけ表示されます。
「xは10より小さい」「xは10」は一度も示されません。

該当のソースコード

JavaScript
1const test = x => {
2    console.log(x);
3        while (x < 20) {     
4            switch (x) {
5                case x < 10:
6                    console.log("xは10より小さい");
7                    break;
8                case x === 10:
9                    console.log("Xは10");
10                    break;
11                default:
12                    console.log("xは10より大きい");
13                    break;
14            }
15            x += 1;
16        }
17};
18test(0);

補足情報（FW/ツールのバージョンなど）

OS: Raspberry Pi OS
ブラウザ: Chromium

行動規範の内容に同意します

回答1件

ベストアンサー

caseではなく、if~else文を使いましょう。

js
1while (x < 20) {     
2    if(x < 10) {
3        console.log("xは10より小さい");
4    } else if(x === 10) {
5        console.log("Xは10");
6    } else {
7        console.log("xは10より大きい");
8    }
9    x += 1;
10}

case文はただの比較です。MDNによると、式を評価し、その式の値が case 節と一致した場合に実行されると書いています。
質問者さんのコードをif文に置き換えた場合、以下のようになってしまいます。

js
1while (x < 20) {
2    if(x == (x < 10)) {
3        console.log("xは10より小さい");
4    } else if(x == (x === 10)) {
5        console.log("Xは10");
6    } else {
7        console.log("xは10より大きい");
8    }
9    x += 1;
10}