はじめに

こんにちは！
今日から時間をかけて、1度ある程度読んだJavaScriptのテキストの復習をしていこうと計画したので、ついでにこちらに投稿して備忘録として残してみようと思います！
まず、最初のテーマは、制御構文です！

制御構文

制御構文って色々ありますよね！

if命令

switch命令

while/do...while命令

for命令
(for命令の中でも、配列なのかオブジェクトなのかによって使い分けもあります。)

この中で、今回は、if命令とswitch命令について投稿します。
この2つの共通点としては、処理を「分岐する」ことです！

if命令

処理を分岐するための命令には、if命令とswitch命令の2つがあります。

if (条件式) {
    trueの場合の処理
} else {
    falseの場合の処理
}

let x = 75;
if (x >= 60) {
  console.log('合格');
} else {
  console.log('不合格');
}

/* 変数xの値は、60以上であるため、条件式はtrueになるので、consoleには、
「合格」が表示される。*/

上記のような構文を用いて、if命令を実行し、処理の分岐を実現できます。
また、else以降のfalseの場合の処理を省略して、trueの場合のみ、処理を指定することも可能です。

また、trueかfalseの2つに処理を分岐させるのではなく、複数分岐させることもできます。

if (条件式1) {
    条件式1がtrueの場合の処理
} else if (条件式2) {
    条件式2がtrueの場合の処理
} else {
    全ての条件式がfalseの場合の処理
}

let x = 77;
if (x >= 90) {
  console.log('Aです。');
} else if (x >= 75) {
  console.log('Bです。'); 
} else if (x >= 60) {
  console.log('Cです。');
} else {
  console.log('不合格です。');
}

/* 変数xの値は、77であり、75以上、90未満である。したがって、consoleには、
「Bです。」が表示される。*/

else ifを必要な数だけ書き、分岐させます。
しかし、条件式を適切な順番で記述しないと、思わぬところで条件が一致し、処理が終了してしまうので、注意が必要です。

switch命令

if命令は、条件によっては、同じような形式で条件が並ぶので、冗長な(長ったらしい)記述になってしまいます。。

例)

if (rank === 'A') {
    console.log('Aランクです。');
} else if (rank === 'B') {
    console.log('Bランクです。');
} else if (rank === 'C') {
    console.log('Cランクです。');
} else {
    console.log('ランク外です。');
}

上記のような、コードが存在したとすします。条件式をそれぞれ見てみると、rank === ‘A’や、rank === ‘b’というように、「rank ===」という形式の条件が複数連なっています。
しかし、このような、長ったらしい、同じような条件の分岐命令も、switch命令を利用すれば、見やすく改善できます。

switch (式) {
    case 値1:
        式 = 値1の場合の処理
        break;
    case 値2:
        式 = 値2の場合の処理
        break;
    case 値3:
        式 = 値3の場合の処理
        break;
    default:
        式の値が全て一致しなかった場合の処理
        break;
}

このswitch命令には1つ注意点があり、それぞれのcaseの処理の最後には、break命令の記述を忘れないことです。switch命令は、条件式に合致するcaseに移動するだけで、そのcaseの処理を終えたとしても、switch命令自体が終了するわけではないため、そのまま、合致したcase以降のcaseの処理も次々と実行してしまうのです。そうならないために、breakを忘れないように気をつけましょう。

意図的にbreak命令を記述しない時はある。(フォールスルー)

let rank = 'B';

switch (rank) {
    case 'A':
    case 'B': 
    case 'C':
        console.log('合格');
        break;
    case 'D':
        console.log('不合格');
        break;
    default:
        console.log('ランク外');
        break;
}

/* 変数rankの値は、Bであるため、consoleには、
「合格」が表示される。*/

上記では、変数rankの値が、Aの場合、Bの場合、Cの場合では、全て同じ処理をしようとしています。この場合、case ‘A’とcase ‘B’、case ‘C’の間にbreak命令を挟んで、終わらせる必要はありません。
仮にbreak命令を記述してしまうと、そこでswitch命令自体が終了してしまうため、適切な処理が行われなくなってしまいます。(行うべき処理があるにも関わらず、case 'A'やcase 'B'の場合に、何も処理が行われない)
ただし、処理内容の詳細を記述している、case ‘C’やcase ‘D’、defaultの後には、break命令が必要になってきます。

以上！！今日のif命令・switch命令のまとめでした！
理解不足による不備等ございましたら、コメントをお願い致します。

参考文献

山田祥寛著『[改訂新版]JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』(2018)
※第1刷は、2016年。

JavaScriptの制御構文(1)〜if命令とswitch命令〜