【JavaScript】switch-caseで「これ以上これ以下」にマッチさせる

2023-03-19

JavaScriptのcaseである範囲の値を指定できないかな〜と思ったらできるらしい。

結論

switch (true) {
case 1 <= x && x <= 10:
...
}

と書ける (ES2020から?)。

前口上

JavaScriptの基本的な文法はC言語とほとんど同じなので、case 1: case 2: ... と続けて書けば複数の値に対してマッチさせた処理を書くことができる。 ただこれが10個とかになると書くのがダルいので、「a以上b以下」みたいに書けたら楽できる。

gccではそのような拡張があって、 case 1...10: と書ける(Case Ranges (Using the GNU Compiler Collection (GCC)))。 JavaScriptでもそういうことができるのか調べた。

case式

ググったらすぐ見つかった。

How can I use ranges in a switch case statement using JavaScript? - Stack Overflow

case に式が書けるので 1 <= x && x <= 10 などと書ける。 注意点としては、 switch (true) とする必要がある(switch (x)だとマッチしない)。 これはswitchcaseの値が「厳密等価演算子(===)を使用して」比較されることによる。

上から順に検査される

Stack Overflow に書かれているように、上から検査されるので case x < 1: ...; case x < 10: ...; などとしていってもよい。

その場合でも、defaultはどこに書いても大丈夫だった。

if〜else ifと同じ?

自分で式を書く必要があるので、if (xxx) ... else if (yyy) ... とほとんど同じに使える。 ただ、breakを書かないで下の条件の処理に合流させることで、ちょっとひねった書き方が可能になる。

またdefaultを途中に差し込めるので、同様に合流させられる。

微妙?

switch (true) とした上ですべての case に式を書く必要があるので、一部の範囲だけ複数マッチしたいがその他は普通の定数 case 、みたいなことができない。

また自分の中では switch 文は値 x に対してどれがマッチするか〜という具合に x を棚上げできて脳負荷を下げられるのが利点という感覚で、それぞれに式を書かれてx以外が触られたり、上から順に条件を見ていく必要があったりするのは辛い。

breakを書かないでFallthroughをしないんだったらif〜else ifと変わらないので、その方がわかりやすいのではないかと思った (そっちだと{}でスコープも区切れるという利点もある)。

リンク