JavaScript if文のサンプル

JavaScriptのif文のサンプルです。

目次

if文

if (条件){
   処理
} else if (条件) {
   処理
} else {
  処理
}
  • 条件がtrueの場合、配下のブロック{ }の処理が実行され、if文の処理は終了します。
  • 条件がfalseの場合、配下のブロック{ }の処理は実行されず、その下(else if/else)に進みます。
  • else ifは、1つ以上記述できます。省略可です。
  • elseのブロック{ }の処理は、どの条件もtrueでなかったときに実行されます。
  • elseは、1つのみ記述できます。省略可です。
  • 以下はMDNのif文のリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/if...else

コード

if文のサンプルです。

<script>
const a = 1;

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

} else if (a === 2) {
	if (a === 2) { 
		console.log("test3"); // 
	}
	
} else {
	console.log("test4");
}
</script>

7行目の条件式を満たすのでtest2が表示されます。
11行目のようにif文の下に更にif文を追加することができます。ネスト(入れ子)といいます。
if文の下にif文を追加しさらにその下にif文を追加・・・というように
ネストを深くすると見にくくなるので使いすぎないようにしましょう。

 

比較演算子

上記コードの===は比較演算子です。
比較演算子は、2つの値を比べて真偽値(true/false)を返します。

比較演算子 説明
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より小さい または 等しい

 

if文で論理積(&&)を使用する

  • 論理積(&&)の左の式と右の式の両方が条件に合致する場合にtrueになります。
  • 論理積(&&)の左の式がfalseの場合、右の式は評価されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
  • 論理積(&&)は論理演算子です。

コード

論理積のサンプルです。

<script>
const a = 6;

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

4行目は、左の式と右の式の両方が条件に合致するのでtrueになります。
変数aは、6かつ10より小さいか→「OK」が表示されます。

 

if文で論理和(||)を使用する

  • 論理和(||)の左の式または右の式のどちらかが条件に合致する場合にtrueになります。
  • 論理和(||)の左の式がtrueの場合、右の式は評価されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
  • 論理和(||)は論理演算子です。

コード

論理和のサンプルです。

<script>
const a = 1;

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

4行目は、右の式の条件に合致するのでtrueになります。
変数aは、0または10より小さいか→「OK」が表示されます。

 

if文で論理否定(!)を使用する

  • 条件が合致する場合はfalseを返し、条件が一致しない場合はtrueを返します。
  • 論理否定(!)は論理演算子です。

コード

論理否定のサンプルです。

<script>
const a = 1;

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

4行目は、条件が合致しますが論理否定(!)があるのでfalseになります。

 

三項演算子

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

コード

三項演算子のサンプルです。

<script>
const a = 1;

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

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

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

リンク

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

関連の記事

JavaScript if文の == と === の違い
JavaScript if文で配列を比較するサンプル
JavaScript for文とbreakとcontinueのサンプル
JavaScript switch文のサンプル
JavaScript while文とdo...while文のサンプル
JavaScript 変数の宣言のvar/let/constの違い

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る