JavaScript | switch()で条件分岐 複数、範囲指定や比較演算子は？

2020-11-30JavaScript 条件分岐,JavaScript

switch文のポイント

• 対象の値とcaseの値は一致か不一致の判別のみ
• 指定可能な値は、数値、文字列で配列の一致等は不可
• 対象の値とcaseの値での範囲指定、比較演算子による比較分岐は不可
• 対象の値、caseの値には変数、数式、関数などを記述できる
• breakはswitch文からの処理抜け
• defaultはいずれにも該当しなかった場合の処理（省略可能）

switch文の基本コード

switch (対象の値) {
	case A:
		//Aに一致した場合;
		break;
	case B:
		//Bに一致した場合;
		break;
	case C:
		//Cに一致した場合;
		break;
	default:
		//いずれも一致しなかった場合;
		break;
}

数値を分岐対象とする

数値を分岐対象としたサンプルコードです。

caseに指定した値と対象の値が同一のものがあればその部分の処理を実行します。

let num = 2;

switch (num) {
	case 1:
		console.log('3');
		break;
	case 2:
		console.log('3');
		break;
	case 3:
		console.log('3');
		break;
	default:
		console.log('default');
		break;
}

//2

文字列を分岐対象とする

文字列を分岐対象としたサンプルコードです。

caseに指定した値と対象の値が同一のものがあればその部分の処理を実行します。

let text = 'aaa';

switch (text) {
	case 'aaa':
		console.log('aaa');
		break;
	case 'bbb':
		console.log('aaa');
		break;
	case 'ccc':
		console.log('ccc');
		break;
	default:
		console.log('default');
		break;
}

//aaa

配列を分岐対象とする（不可）

対象の値やcaseの値に配列を指定して実行したサンプルコードです。

結果として一致はしませんでしたのでswitch()で配列に一致・不一致による分岐処理は不可能なのが確認できます。

let arr = [1,2];
let chk = [1,2];

switch (arr) {
	case chk:
		console.log('ok');
		break;
	default:
		console.log('default');
		break;
}

//default

対象の値に計算式を利用する

switch()は対象の値を記述する際、計算式も記述することが可能です。

let num = 2;

switch (num * 5) {
	case 5:
		console.log('5');
		break;
	case 10:
		console.log('10');
		break;
	case 15:
		console.log('15');
		break;
	default:
		console.log('default');
		break;
}

//10

caseの値に変数、計算式を利用する

対象の値とcaseの値の条件分岐は一致・不一致のみでの判別となっていますが、caseの値にも変数や計算式を記述することは可能となっています。

let num = 8;
let chk = 2;
switch (num) {
	case chk * 2:
		console.log('4');
		break;
	case chk * 4:
		console.log('8');
		break;
	case chk * 6:
		console.log('12');
		break;
	default:
		console.log('default');
		break;
}

//8

caseに関数を利用する

caseの値に関数を指定した場合のサンプルコードです。

結果として、対象の値が関数の返り値と一致した処理が実行されることが確認できました。

let num = 10;

chk = function () {
	return 10;
}

switch (num) {
	case chk():
		console.log('ok');
		break;
	default:
		console.log('default');
		break;
}

//ok

関数が利用できるということは、計算処理後、一致とさせたい場合に対象の値を返り値として返せば、範囲指定や比較などの分岐も作成できそうです。
とわいえ、if文や他の方法を使った方が簡単な場合は殆どでしょうから無意味に近そうですけど。

複数のcaseで同一の処理を行う

switch文はcase毎にbreakの記述を省略した場合、該当したcase以降も一致判定または処理を続けます。

「case 値:」のみを記述した場合は、if文でいうところのor条件のような処理となます。

以下サンプルで説明するとcase 1に該当する結果ですが、case ２の部分に書かれた処理が実行されるようになります。

let num = 1;
switch (num) {
	case 1:
	case 2:
		console.log('1または2');
		break;
	case 3:
		console.log('3');
		break;
	default:
		console.log('default');
		break;
}

//1または2

switch文の処理中で変数を定義して使う

switch文の処理中で、同じ変数名の変数をそのまま中で定義して使うと「Uncaught SyntaxError」のエラーとなります。

解決策のひとつとして、caseの値を指定した後にくる「:」から次のcaseまたはdefaultまでをそれぞれ{}で囲うことでエラーは解消されます。

switch (10) {
	case 10:{
		let log = '10';
		console.log(log);
		break;
	}
	default:{
		let log = 'default';
		console.log(log);
		break;
	}
}