JavaScript if文のサンプル

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

目次

if文

if (条件式1){
   条件式1を満たした時に実行される処理
} else if (条件式2) {
   条件式2を満たした時に実行される処理
} else {
  どの条件式も満たさなかった時に実行される処理
}

コード

サンプルのコードです。
7行目の条件式を満たすのでtest2が表示されます。
11行目のようにelse if文の中にif文を記述することができます。入れ子の構造です。

<script>
	var a = 1;

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

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

 

比較演算子

上記コードの==は比較演算子です。
以下は、JavaScriptの比較演算子の一覧です。

比較演算子 説明
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)といいます。

コード

4行目は、偶数かつ10より小さい場合にtrueになります。
→「OK」が表示されます。

<script>
	var a = 6;

	if ((a % 2 == 0)  &&  (a < 10)){
		document.write("OK"); // OKが表示される
		
	} else {
		document.write("NG");
	}
</script>

 

論理演算子の論理和(||)

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

コード

4行目は、偶数または10より小さい場合にtrueになります。
→「OK」が表示されます。

<script>
	var a = 1;

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

 

三項演算子

条件式  ?  値1 :  値2
  • 条件式がtrueのとき、値1が返されます。
  • 条件式がfalseのとき、値2が返されます。

コード

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

<script>
	var a = 1;

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

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

リンク

以下は、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文のサンプル

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る