【JavaScript】 if文やswitch文で 何故か正しく分岐しない・・・

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

今回は、構文ミスでも条件の指定ミスでもタイプミスでもない、エラーも出ていないのに何故か思った通りに動かない原因不明の不具合があったときにまず確認してほしい「データ型」についてです。

この記事をご覧の皆さんは「コードのタイプミスでもないし、ちゃんと関数は動いているはずなのに何故か思った通り動かない」や 「条件は合ってるはずなのに何故かうまく分岐されない」といったことで悩んだことがあったり、まさに今悩んでいるところかと思います。

実はそれ、「データ型」が関わっているかもしれません。

以下のコードを見てみましょう。

function sample(val){
  switch (val) {
    case "1":
      console.log("あいうえお");
      break;
    case "2":
      console.log("かきくけこ");
      break;
    default:
      console.log("その他");
      break;
  }
}

上記はsample関数の引数で渡ってきたvalによってswitch文で条件分岐する処理です。

実際に受講生がこのような処理を書いた時に、

「書き方は合っているはずなのに実際にやるとうまくいかないんです。エラーメッセージが出ないので何が原因かわかりません。」

という状況がありました。
「１」を引数で渡しているはずなのに「あいうえお」ではなく「その他」がコンソールに出力されてしまう、と。

このようにエラーメッセージが出ない不具合は、初心者にとっては天敵です。

先に結末を言ってしまうと、引数で渡ってきた「１」は「文字列の１」ではなく「数値の１」だったため、case “1”：の条件には当てはまらず、default:の条件に入ってしまったということでした。

なので、不具合が起こった時は「データ型は大丈夫か？」ということも考える意識を持っておきましょう。

データ型の確認は、typeof 演算子で行うことができます。
console.log()と併用して確認してみましょう。

typeof演算子の使用例
// valに「数値の１」を渡した時。
function sample(val){
  console.log(typeof val); // numberと表示されます。
  switch (val) {
    case "1":
      console.log("あいうえお");
      break;
    case "2":
      console.log("かきくけこ");
      break;
    default:
      console.log("その他");
      break;
  }
}

つまり何が言いたいかというと、「データ型、意識しましょう！」ということです！

以上で解説は終わりです。
また次の記事でお会いしましょう！