switch文 [JavaScript]

switch文は、if文同様、条件分岐の一種。
１つの値を起点とした場合分けに特化している。

この値が、
このとき、
これをする。

のようなときに使用することができる。

switch文で書いたものは全てif文でも書けるが、if文の場合分けが多くなってくると、swtich文の方が意図を伝えやすいコードになり、読みやすい。

目次：

・switch文の基本構文
・if文とswitch文の違い
・フォールスルーに注意する
・フォールスルーをあえて利用するやり方。
・default
・まとめ

switch文の基本構文

switch (式){

  case 条件1:
    式が条件1と一致する場合に実行する処理;
    break;
  case 条件2:
    式が条件2と一致する場合に実行する処理;
    break;
  case 条件3:
    式が条件3と一致する場合に実行する処理;
    break;
  default:
    式がいずれのcase文とも一致しない場合に実行する処理;
}

基本構文の流れ：

１、switchの後に()内に式を記述して評価する。

２、評価した値がcaseの後に書かれたいずれかの値と一致するかどうかを調べる。
（値は直接の値、変数も可能。）

３、一致するものが見つかった場合は、そのcaseの後に書かれている処理を実行する。
実行の際は、
switch文の最後、またはbreak文まで順に実行する。

４、いずれの値とも一致しなかった場合はdefaultの後に記述されている処理を実行する。
（defaultは省略可能。）

if文とswitch文の違い

疑問：

if文でも同じ文章を書けるのであれば、
わざわざswitch文を使わなくても良いんじゃないの？

と思うかもしれません。

ですが、下記の例のように
１つの値を起点とした場合分け
をする場合は、switch文の方がより簡単に、見た目にもわかりやすく書くことができます。

例：

const dayに週の曜日の数字と対応する値を一つ入力する。
入力された値に応じて適切な週の曜日を出力するロジック。

if文の場合

const day = 2;

if (day === 1) {
	console.log("月曜日");
} else if ( day === 2) {
	console.log("火曜日");
} else if ( day === 3) {
	console.log("水曜日");
} else if ( day === 4) {
	console.log("木曜日");
} else if ( day === 5) {
	console.log("金曜日");
} else if ( day === 6) {
	console.log("土曜日");
} else if ( day === 7) {
	console.log("日曜日");
}

出力結果

 火曜日

switch文の場合

const day = 2;

switch(day) {
	case 1:
		console.log("月曜日");
		break;
	case 2:
		console.log("火曜日");
		break;
	case 3:
		console.log("水曜日");
		break;
	case 4:
		console.log("木曜日");
		break;
	case 5:
		console.log("金曜日");
		break;
	case 6:
		console.log("土曜日");
		break;
	case 7:
		console.log("日曜日");
		break;
}

出力結果

 火曜日

上記のように、if、if elseが複数になると、ごちゃごちゃとして見にくい・・
一方、switch文の方がみやすい！

フォールスルーに注意する

IT用語辞典引用
フォールスルー(fall through)とは、プログラミングにおいてswitch文で分岐を行う際に、caseブロックの末尾にbreak文を置かずに次のcaseブロックをそのまま実行すること。

フォールスルーが起きる例を、先ほどの週の曜日を出力するロジックで行ってみる。

例：

const dayに週の曜日の数字と対応する値を一つ入力する。
入力された値に応じて適切な週の曜日を出力するロジック。

breakなしで出力してみると、フォールスルーが発生してしまう・・・

フォールスルーが発生してしまうと、入力された値に対応する値を見つけたら、
その後に記載されているロジックの全てに処理が走ってしまう。

結果、バグの原因となってしまう可能性もあるので注意する。

switch文の場合

const day = 2;

switch(day) {
	case 1:
		console.log("月曜日");
	case 2:
		console.log("火曜日");
	case 3:
		console.log("水曜日");
	case 4:
		console.log("木曜日");
	case 5:
		console.log("金曜日");
	case 6:
		console.log("土曜日");
	case 7:
		console.log("日曜日");
}

出力結果

火曜日
水曜日
木曜日
金曜日
土曜日
日曜日

break;を書かなかったせいで、対応する値　”２” の曜日　”火曜日”
以降のconsole.logが全て出力されてしまった・・

フォールスルーをあえて利用するやり方。

フォールスルーは指定した値を見つけたら、
それ以降breakがあるまで全てを出力するという特性をあえて利用することもできる。

例：

const dayに週の曜日の数字と対応する値を一つ入力する。
入力された値に応じて適切な週の曜日を出力するロジック。

フォールスルーの特性のおかげで、
constの値に6を入力しても、7を入力しても
出力を 週末 と出すことができる。

const day = 6;

switch(day) {
	case 1:
		console.log("月曜日");
		break;
	case 2:
		console.log("火曜日");
		break;
	case 3:
		console.log("水曜日");
		break;
	case 4:
		console.log("木曜日");
		break;
	case 5:
		console.log("金曜日");
		break;
	case 6:
	case 7:
		console.log("週末");
		break;
	default:
		console.logz("無効な値です。");
}

出力結果

週末

default

caseを使って条件分岐をした際に、
いずれのcaseにも一致しなかった場合に何か処理を記載したい場合に使用する。

if文でいうelseと同じ用途として使用することができる。

const day = 8;

switch(day) {
	case 1:
		console.log("月曜日");
	case 2:
		console.log("火曜日");
	case 3:
		console.log("水曜日");
	case 4:
		console.log("木曜日");
	case 5:
		console.log("金曜日");
	case 6:
		console.log("土曜日");
	case 7:
		console.log("日曜日");
	default:
		console.log("無効な数字になります。");
}

出力結果

無効な数字になります。

まとめ：

自分自身、if文とごちゃごちゃになっていたので、
ちゃんと別々のものと理解し、それぞれの使い分けや利点を理解できたのでよかったです。

また、前回の条件分岐の記事では、JSの記述が明確なものではなく編集リクエストを初めていただきました。
@junerさん。この場を借りて改めてお礼申し上げます。
ありがとうございました。