if文、if-else文(条件分岐)

if文の基本形

if(条件)で条件分岐を行い、条件に合致する場合はif文内の処理を行う。

if (a === 1) {
    console.log('aは1です');
  }

if else

if(条件式)  {
  条件がtrueになるときに実行する処理
} else {
  条件がfalseになるときに実行する処理
}

if文は条件によって処理を分岐させ、一致する場合の処理と、一致しない場合の処理を記述するための方法。
条件が一致する場合を「true」、条件が一致しない場合を「false」と言う。
条件分岐をさらに増やしたい場合は、「else if」を用いる。

else if (if,else if, elseの形)

「trueだった場合、falseだった場合、trueでもfalseでもない場合」のように3つの条件分岐を作る。

if(条件1)  {
  条件1trueになるときに実行する処理
} else if(条件2) {
  条件2trueになるときに実行する処理
} else {
  条件1,2がどちらもfalseになるときに実行する処理

else ifを複数設定する場合、条件ごとにelse ifを記述して追加する。
else ifはいくつでも追加できるが、多すぎると可読性が下がるため、条件が多い場合はswitch文を使用する方が良いケースもある。

if (a === 1) {
    console.log('aは1です');
  } else if (a >= 2 && a <10) {
    console.log('aは2以上、かつ10未満です')
  } else if (b === 1) {
    console.log('bは1です');
  } else {
    console.log('aは1でも、2以上10未満でもなく、さらにbが1でもありません');
  }

比較演算子

a === b aとbが等しいときtrue
a !== b  aとbが等しくないときtrue
a < b   aがbより小さいときtrue
a <= b   aがb以下のときtrue
a > b   aがbより大きいときtrue
a >= b   aがb以上のときtrue

論理演算子

JavaScriptで使える論理演算子には、AND、OR、NOTの3種類がある。

a && b (AND)aとbが両方trueのとき、全体の評価結果がtrue
a || b  (OR)aかbのどちらか1つがtrueのとき、全体の評価結果がtrue
! a   (NOT)aがtrueでないとき、評価結果がtrue
     (条件式の評価結果がtrueの場合はfalseを返し、falseの場合はtrueを返す)

入れ子(ネスト)

if文の中にさらにif文を書くことで、入れ子(ネスト)にして条件分岐させることも可能。
サンプルでは、「aが1」であり「bが1」であればコンソールに「aは1かつbは1です」と表示する。この処理は論理演算子を使用したANDと同じ処理になる。

if (a == 1) {
  if (b == 1) {
        console.log('aは1かつbは1です')
    }
}

処理が1行しかない場合の省略形

{}内の処理が1行しかない場合は{}を省略することができる。

if (a > 10) {
    console.log('a10より大きいです);
}

↓

if (a > 10) console.log('a10より大きいです');

三項演算子を使った省略形

三項演算子はif...elseを1行で書くための記述方法で、実際のコーディングでも短いif文の場合は三項演算子を使用することがある。

<書き方>
条件式 ? trueの場合の処理 : falseの場合の処理

console.log(a > 10 ? 'aは10より大きいです') : ('aは10以下です');


条件分岐(if文、switch文)

JavaScriptでは、条件分岐は「if」文または「switch」文で行う。
3分岐まではif文、それ以上の多分岐になる場合はswitch文が適している。
switch文は、変数に対して固定値ごとの挙動切り替えのために使われるのに対して、if文は複雑な条件でも対応できるので条件が複雑な場合はif文を用いる必要がある。条件などの状況に応じて使い分ける。

if文とswitch文の最大の違いは、処理速度と処理の仕方。
通常switch文の方が処理が速い。
if文が条件式を上から順に評価していくのに対して、switch文の条件文の評価は一度だけになる。



この記事が気に入ったらサポートをしてみませんか?