本記事では、JavaScriptの条件分岐で使われるif文とswitch文の使い分けについて解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座

メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる


Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!



初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード


メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)


目次
if文とswitch文はどうのように使い分ける?
if文とswitch文を使い分ける判断基準はとても簡単で、等価演算子を利用した分岐を実装したい場合はswitch文を使い、それ以外の分岐を実装する際はif文を使います。理由は明白でswitch文は等価演算子による分岐に特化した条件分岐命令だからです。
例えば、if文で等価演算子を利用した分岐処理を作ってみましょう。
let hobbySports = "soccer";
if (hobbySports === "basketball") {
console.log("趣味のスポーツはバスケです");
} else if (hobbySports === "tennis") {
console.log("趣味のスポーツはテニスです");
} else if (hobbySports === "soccer") {
console.log("趣味のスポーツはサッカーです");
} else {
console.log("それ以外のスポーツです");
}
===だらけで、コードがかなり見づらいですね。これをswitch文に置き換えてみましょう。
let hobbySports = "soccer";
switch (hobbySports) {
case "basketball":
console.log("趣味のスポーツはバスケです");
break;
case "tennis":
console.log("趣味のスポーツはテニスです");
break;
case "soccer":
console.log("趣味のスポーツはサッカーです");
break;
default:
console.log("それ以外のスポーツです");
break;
}
かなり見やすくなりましたね。このようにif文とswitch文を使い分けることでコードがスッキリし可読性も上がります。