#5 JavaScriptで学ぶ条件分岐の基本

JavaScriptの条件分岐は、多くの言語と共通する中括弧を使った書き方が基本です。この記事では、JavaScriptにおける条件分岐の基本的な書き方と、独特な仕組みを解説します。

if文の基本

JavaScriptの条件分岐は次のように書きます。

let age = 20;
if (age >= 18) {
    console.log("成人です");
}

条件をかっこ()で囲み、実行したい処理を中括弧{}で囲みます。

else・else ifで分岐を増やす

if (age >= 65) {
    console.log("高齢者です");
} else if (age >= 18) {
    console.log("成人です");
} else {
    console.log("未成年です");
}

switch文

候補が多い場合はswitchを使います。

switch (day) {
    case "土":
    case "日":
        console.log("休日です");
        break;
    default:
        console.log("平日です");
}

条件式には===を使う

条件分岐の中で値を比較する際は、==ではなく===を使うのが基本です。以前の記事でも触れた通り、==は型を変換してから比較するため、意図しない条件成立を招くことがあります。

短絡評価を利用した書き方

&&・||は「短絡評価」という性質を持ち、これを利用して条件分岐の代わりに使う書き方もよく見られます。

user && console.log(user.name); // userがtruthyなときだけ実行
const name = user || "ゲスト";  // userがfalsyなら"ゲスト"を使う

JavaScriptならではの注意点

JavaScriptには、ifの条件として扱われる際に「falseとみなされる値(falsy値)」というものが存在します。数値の0や空文字""、null、undefinedなどは、条件式の中でfalseとして扱われます。「変数に0が入っているだけなのに、if文が実行されない」という現象に出会ったら、このfalsy値の仕組みを疑ってみましょう。

三項演算子で短く書く

「条件によって値を1つ選ぶ」だけの単純な分岐は、三項演算子でも書けます。

const status = age >= 18 ? "成人" : "未成年";

まとめ

JavaScriptの条件分岐はif・else if・else・switchで表現し、比較には===を使うのが基本です。三項演算子やfalsy値という独特の仕組みも押さえておくと、思わぬバグを避けられます。

---

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

---

PR

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方は こちらをご覧ください。