【JavaScript】else if文 - 条件分岐 / 複数条件による処理の分岐

JavaScriptのelse if文（条件分岐）について解説します。

検証環境

JavaScript -

macOS

14.1

else if文

else if文は“if文の複数分岐を実現する構文”です。

if文と合わせて使い、任意の数だけelse if文によって条件分岐を作れます。

基本構文

if( 論理値１ ) {
    // 処理...
} else if( 論理値２ ) {
    // 処理...
}

else if文はif文に続けて記述します。

else if文と直前の波括弧（}）の間にはスペースや改行、コメントを含むことが可能です。

１つのif文に対して、複数のelse if文を使用することができ、２個目以降も１個目と同様に波括弧に続けて記述します。

if( 論理値１ ) {
    // 処理...
} else if( 論理値２ ) {
    // 処理...
} else if( 論理値３ ) {
    // 処理...
} else if( 論理値４ ) {
    // 処理...
}

処理の流れ

if文（else if文を含む）は先頭（上）から順番に論理値を評価します。

論理値が真（true）となった波括弧内の処理のみを実行し、以降の条件分岐はスキップされます。

そのため、if文が実行する分岐処理は１つのみです。

サンプル

sample.js

let num = 180;

if( num <= 100 ) {
    console.log("numは100以下の値です。");
}
___ih_hl_start
else if( num <= 200 ) {
    console.log("numは200以下の値です。");
}
___ih_hl_end

console.log("処理を終了します。");

Console

numは200以下の値です。
処理を終了します。

６〜８行目がelse if文による条件分岐です。

if文を含め２個の条件分岐があり、else if文のnum <= 200がtrueとなるため、console.log("numは200以下の値です。")が実行されます。

また、else if文を複数繋げて条件分岐を増やすことも可能です。

sample.js

___ih_diff_start
-let num = 180;
+let num = 280;
___ih_diff_end

if( num <= 100 ) {
    console.log("numは100以下の値です。");
}
else if( num <= 200 ) {
    console.log("numは200以下の値です。");
}
___ih_diff_start
+else if( num <= 300 ) {
+    console.log("numは300以下の値です。");
+}
+else if( num <= 400 ) {
+    console.log("numは400以下の値です。");
+}
___ih_diff_end

console.log("処理を終了します。");

Console

numは300以下の値です。
処理を終了します。

９〜１４行目に２つのelse if文を追加しました。（変数numの値も変更しました。）

全体で４個の条件分岐があり、３個目のnum <= 300がtrueとなるため、console.log("numは300以下の値です。")が実行されます。

４個目num <= 400もtrueですが、条件分岐済みのため、この部分の分岐処理は実行されません。

もし、いずれの条件分岐にも該当しない場合は全ての波括弧内の処理がスキップされます。

sample.js

___ih_diff_start
-let num = 280;
+let num = 500;
___ih_diff_end

if( num <= 100 ) {
    console.log("numは100以下の値です。");
}
else if( num <= 200 ) {
    console.log("numは200以下の値です。");
}
else if( num <= 300 ) {
    console.log("numは300以下の値です。");
}
else if( num <= 400 ) {
    console.log("numは400以下の値です。");
}

console.log("処理を終了します。");

Console

処理を終了します。