JavaScript勉強会

JavaScriptの学習日記

【JS学習マラソン】第16回 1.2.13 switch文

JavaScript学習マラソンの第16回は、

「現代の JavaScript チュートリアル」パート1の2.13「switch文」です。

 

switch文 https://ja.javascript.info/switch

を読んでみます。

 

条件分岐のswitch

条件分岐には、if文がありました。

 

jsstudy.hatenablog.com

 

if文と同様に条件分岐を実現する仕組みとして、JavaScriptではswitch文も用意されています。

 

switch文の文法、使い方はチュートリアルの説明通りですね。

 

ja.javascript.info

 

developer.mozilla.org

 

switch 文は式を評価し、その式の値が case のラベルと一致するなら、その case に関連付けられた文を実行します。

 

JavaScriptのswitch文の注意点

他の手続型プログラミング言語には、たいていswitchが用意されています。

JavaScriptのswitchの特徴は、条件を比較するときに、データの型を厳密にチェックすることです。

 

型の問題

等価チェックは常に厳密であることに注目しましょう。

マッチするために値は同じ型である必要があります。

 

(例)

switchの式の値が文字列なら、caseのラベルに使う値も文字列にしておく。

 

let arg = prompt("Enter a value?")
switch (arg) { // 式argは文字列
  case '0': // ラベル'0'は文字列 
  case '1': // ラベル'1'は文字列
    alert( 'One or zero' );
    break;

  case '2': // ラベル'2'は文字列
    alert( 'Two' );
    break;

  case 3: // ラベル3は数値。型が一致してないのでダメ
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' )
}

 

上記の例では、argが文字列になっているので、caseのラベルも数値の「case 3:」ではなく文字列の「case '3':」と指定しないとダメなんですね。

 

breakは必ずつける

switchは、線路の切替器と同じで、複数の選択肢の中から1個を選ぶのが基本です。

列車の場合なら、複数の線路から2つも3つも選べたら、脱線してメチャクチャになりますね?

(列車の1両目は右に行って、2両目は左に行くと、行き先がバラバラで列車が倒れるみたいなイメージ)

 

特別な事情がない限りは、バグの原因にもなりかねないので、switch文では各caseにbreakを付けて、1個だけcaseを処理するようにしておくのが無難です。

 

(参考)

teratail.com

 

Switchってのは本来の意味で言えば切替器の事です。

例として電車の線路の分岐点の側にレバーがあるとイメージしてみましょうか。

レバーを右に引けば路線は右に接続、左に引けば路線は左に接続…
この状況ではレバーの状態は右か左かの2値しかありません。

 

それが転じて、Switch文は少ない値を前提とする切替器を定義する文として使われています。

 

ja.wikipedia.org

 

分岐器(ぶんきき、ぶんぎき、英: railroad switch, turnout)とは、鉄道の線路において線路を分岐させ、車両の進路を選択する機構。

アメリカ英語での正式名称は、ターンアウトスイッチ。

 

f:id:jsstudy:20190814005055j:plain

 

switchの欠点

JavaScriptのswitchには欠点もあります。

switchの条件式やcaseのラベルで、比較する値として配列やオブジェクトのデータを使うと、予想していた挙動と全然違う結果になってしまうことがあります。

原因は、JavaScriptの変数の仕組みにあります。

 

(参考)

jsstudy.hatenablog.com

 

「値の参照」という仕組みを念頭において、値の比較で配列やオブジェクトを使う場合は、自分が希望している動作になるような操作が必要です。

 

そういうわけで、JavaScriptのswitch文やif文では、比較の条件として配列やオブジェクトのデータをそのまま使うのは避けた方が良いでしょう。

 

どうしても、条件式で配列やオブジェクトを比較に使いたい場合は、「何を比べているのか?」を意識しながら使います。

 

  • いったんJSONに変換してから比較する。
  • 関数型ライブラリー等を利用する。
  • 関数型プログラミングのパターンマッチで比較する。(switchやifを使わなくても条件分岐は可能)

 

関数型ライブラリー

(参考)

lodash.com

 

qiita.com

 

関数型プログラミングのパターンマッチ

(参考)

switchの代わりにパターンマッチを使う方法は、「関数型プログラミングの基礎」という本の137ページで紹介されていました。

 

jsstudy.hatenablog.com

 

まとめ

  • JavaScriptでは、条件分岐の仕組みとして、if文の他にswitch文も用意されている。
  • switchは、列車の線路の切替器みたいなもの。複数の選択肢の中から1個を選ぶのが基本。
  • 各caseでbreakを使い、1つのcaseだけが実行されるようにする。(混乱防止)
  • switchは、式とラベルで同じデータ型の値を使う。
  • 配列やオブジェクトのデータを比較したい場合は、いったんJSON(文字列)に変換してから比較するようにしておく。
  • 条件分岐はifやswitchを使わなくても、パターンマッチでも実現できる。

 

switchの特徴や欠点を理解しておきたいです。

switchと同じことはifでもできます。

switchに慣れない間は無理して使わず、ifを使っておけばバグを予防できると思います。

 

 

 

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)