[JavaScript] if文のサンプル

JavaScriptのif文のサンプルです。条件で処理を分岐する時に使用します。

目次

if文 if文とは / if文のサンプル / ネスト構造 if文の中にif文
  undefinedを比較 / nullと空文字を比較 / 三項演算子
  比較演算子
論理演算子 論理積(&&) AかつB / 論理和(||) AまたはB / 論理否定(!) Aではない
  排他的論理和(^)

if文とは

if (条件){
   処理
}
// else ifとelseを書く場合
if (条件){
   処理
} else if (条件) {
   処理
} else {
  処理
}
  • 条件が合致する場合、配下のブロック{ }の処理が実行され、if文の処理は終了します。
  • 条件が合致することをtrue(真)ともいいます。
  • 条件が合致しない場合、配下のブロック{ }の処理は実行されず、その下(else if/else)に進みます。
  • 条件が合致しないことをfalse(偽)ともいいます。
  • else ifは、1つ以上記述できます。省略可能です。
  • elseは、1つのみ記述できます。省略可能です。elseのブロック{ }の処理は、どの条件も合致しなかったときに実行されます。

if文のサンプル

<script>
    const a = 1;

    if (a === 0) {
        console.log("0");

    } else if (a === 1) {
        console.log("1"); // 1が表示される

    } else {
        console.log("other");
    }
</script>

4行目から12行目までがif文です。
7行目は、条件が合致する(aの値は1である)のでその配下の処理が実行されます。
8行目の処理が実行されif文を抜けます(終了します)。

以下はMDNのif文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else

ネスト構造 if文の中にif文

<script>
    const a = 1;
    const b = 1;

    if (a === 1) {
        if (b === 1) {
            console.log("1"); //1が表示される
        }
    }
</script>

6行目は、if文の中にif文を記述しています。ネストの構造です。入れ子ともいいます。

undefinedを比較

if (typeof 変数 === "undefined") 
  • undefinedは変数に値が代入されていない状態を表します。
  • undefinedを比較するときは、typeof演算子を使用します。
<script>
    var a;

    if (typeof a === "undefined") {
        console.log("true"); // 出力される
    }
    if (!a) {
        console.log("true"); // 出力される
    }

    var b = 3;

    if (typeof b !== "undefined") {
        console.log("true"); // 出力される
    }
    if (b) {
        console.log("true"); // 出力される
    }
</script>

4行目は、typeof演算子でundefinedか比較しています。
13行目は、否定(!==)です。
7,16行目のように、変数のみでの判定もできます。

nullと空文字を比較

if (変数 === null) 

nullは中身が空の状態を表します。nullと空文字("")は別です。

<script>
  var a = null;

  if (a === null) {
    console.log("true-a"); // 出力される
  }
  if (a) {
    console.log("true-a");
  } else {
    console.log("false-a"); // 出力される
  }
  if (!a) {
    console.log("true-a"); // 出力される
  }

  var b = "test";

  if (b) {
    console.log("true-b"); // 出力される
  }

  var c = "";

  if (c === null) {
    console.log("true-c");
  } else {
    console.log("false-c"); // 出力される
  }
  if (c) {
    console.log("true-c"); 
  } else {
    console.log("false-c"); // 出力される
  }
  if (!c) {
    console.log("true-c"); // 出力される
  }
</script>

nullは===nullでtrueになりますが空文字ではfalseです。
変数の否定(!aと!c)であれば両方ともtrueになります。

三項演算子

変数 = 条件式  ?  値1 : 値2
  • if文に似た動きをします。
  • 条件式がtrueのとき、値1が返されます。
  • 条件式がfalseのとき、値2が返されます。
<script>
    const a = 1;

    // 三項演算子
    const b = a === 0 ? "true" : "false";
    console.log(b); // falseが表示される

    if (a === 0) {
        console.log("true");
    } else {
        console.log("false"); // falseが表示される
    }
</script>

5行目は、三項演算子です。
5,6行目をif文で書くと、8~12行目のようになります。

比較演算子

比較演算子は、2つの値を比べて条件を満たしていればtrue,そうでない場合はfalseを返します。
イコール3つ(===)は値と型を比較します

比較演算子 説明
a == b aとbの値は等しい
a === b aとbの値は等しい かつ 型も等しい
a != b aとbの値は等しくない
a !== b aとbの値が等しくない または 型が等しくない
a > b aはbより大きい
a >= b aはbより大きい または 等しい
a < b aはbより小さい
a <= b aはbより小さい または 等しい

以下はMDNの比較演算子のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

論理積(&&)  AかつB

if (左の条件式) && (右の条件式)
  • 左の式と右の式が両方ともtrueの場合、trueになります。それ以外はfalseです。
  • 左の式がfalseの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
<script>
    const a = 6;

    if (a === 6 && a < 10) {
        console.log("true"); // trueが表示される
        
    } else {
        console.log("false");
    }
</script>

4行目は、左の式と右の式が共にtrueなので、trueになります。

論理和(||)  AまたはB

if (左の条件式) || (右の条件式)
  • 左の式または右の式のどちらかがtrueの場合、trueになります。
  • 左の式がtrueの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
<script>
    const a = 1;

    if (a === 0 || a < 10) {
        console.log("true"); // trueが表示される
        
    } else {
        console.log("false");
    }
</script>

4行目は、左の式はfalseですが右の式がtrueなのでtrueになります。

論理否定(!)  Aではない

if  !(条件式) 
  • 式がfalseの場合にtrueになります。
  • 式がtrueの場合にfalseになります。
<script>
    const a = 1;

    if (!(a === 2)) {
        console.log("true"); // trueが表示される
    }

    if (!(a === 1)) {
        console.log("true");
        
    } else {
        console.log("false"); // falseが表示される
    }
</script>

4行目は値の比較でfalseになり、それを!で否定するのでtrueになります。
8行目は値の比較でtrueになり、それを!で否定するのでfalseになります。

排他的論理和(^)

if (左の条件式) ^ (右の条件式)
  • 左の式がtrueで右の式がfalseの場合、trueになります。
  • 左の式がfalseで右の式がtrueの場合、trueになります。
  • 左の式と右の式が両方ともtrueの場合、falseになります。
  • 左の式と右の式が両方ともfalseの場合、falseになります。
<script>
    const a = 2;
    const b = 2;

    if ((a === 2) ^ (b === 3)) {
        console.log("true"); // trueが表示される
    } else {
        console.log("false");
    }

    if ((a === 3) ^ (b === 2)) {
        console.log("true"); // trueが表示される
    } else {
        console.log("false");
    }

    if ((a === 2) ^ (b === 2)) {
        console.log("true");
    } else {
        console.log("false"); // falseが表示される
    }

    if ((a === 3) ^ (b === 3)) {
        console.log("true");
    } else {
        console.log("false"); // falseが表示される
    }
</script>

5行目は、左の式がtrueで右の式がfalseなので、trueになります。
11行目は、左の式がfalseで右の式がtrueなので、trueになります。
17行目は、左の式と右の式が両方ともtrueなので、falseになります。
23行目は、左の式と右の式が両方ともfalseなので、falseになります。

以下は、wikiの短絡評価のリンクです。
https://ja.wikipedia.org/wiki/%E7%9F%AD%E7%B5%A1%E8%A9%95%E4%BE%A1

関連の記事

JavaScript if文の == と === の違い
JavaScript if文で配列を比較するサンプル
JavaScript switch文のサンプル

△上に戻る