【JavaScript】条件分岐構文 - ifの使用方法

JavaScript の if 文についてまとめました。

if文について

JavaScript の if 文の基本構文は次の通りです。

if (条件式) {
    処理1;  // 条件式1がtrueの場合に実行
} else if (条件式2) {
    処理2;  // 条件式2がtrueの場合に実行
} else {
    処理3;  // 条件式1と2がfalseの場合に実行
}

if文では条件式が true の場合に直後のブロックを、false の場合には else 以降のブロックを実行します。else if や else は省略可能です。

波括弧も以下のように省略可能ですが、ネストした際にブロックの範囲が不明確となるので推奨はされません。else の無い単純な if 文くらいであればいいでしょう。

var i = 50
if (i >= 100) document.writeln('iは100以上です。');
else document.writeln('iは100未満です。');

if...else - JavaScript | MDN

三項演算子

条件演算子である三項演算子についてです。構文は条件式 ? trueの場合の式 : falseの場合の式という形式であり、正確にはif文とは違いますが、基本的にif文のように使われます。

var msg = num < 10 ? "10未満" : "10以上";
document.writeln(msg);

真偽値以外のfalse

条件式の結果は、比較演算子を使用した boolean の true または false である必要はありません。JavaScript では以下の値も false とみなされます。

空文字列
数値の0
NaN (Not a Number)
undefined
null

そのため次のような判定方法が可能となります。

if (hoge) {
    // hogeが空文字やundefinedや数値の0じゃない場合の処理
}

Truthy - 用語集 | MDN
Falsy - 用語集 | MDN

論理演算子を用いた判定

基本的に論理演算子である&&と||は真偽値とともに用いられます。

if (num >= 10 && num < 20) {
    // 処理内容
}

しかし、&&および||演算子は、実際には指定された演算対象の一方を返します。そのため、演算子が真偽値ではない値とともに用いられた場合、真偽値ではない値を返す可能性があります。

これは&&と||演算子を真偽値ではない値である演算対象とともに用いても、上記の「真偽値以外のfalse」にもあるように、戻り値は常に真偽値と見なすことができるからです。論理演算子は左から右へ評価されるため、以下の規則が成り立ち、anything の部分は評価されることはありません。

false && (anything)  // 評価するとfalse になる。
true || (anything)  // 評価するとtrue になる。

if文を使った条件分岐を以下のように省略することが可能です。

var id;
if (data) {
    id = data.id; 
} else {
    id = data;
}
// &&を使用した場合
var id = data && data.id;

var name;
if (input) {
    name = input;
} else {
    name = 'anonymous';
}
// ||を使用した場合
name = input || 'anonymous';

論理演算子 - JavaScript | MDN

TASK NOTES