if文のelseと成立の実行条件


JavaScriptでは、通常はコードは上から順番に解釈していきますが、if文を使うと「もし~だったら、~する」として、ある条件が成立した時に処理を実行してコードの解釈の順番を変えることができます。

if文での複数条件

if文で条件が成立するのは、ifの直後の()の条件式がtrueと解釈された時でfalseと解釈されれば実行しません。

条件が成立したら処理を実行するだけなら、全ての条件が成立すると全て実行することになります。以下のコードを見てみます。

let x = 100;

if(x > 10){
	console.log("1番目のxは" + x); // 1番目のxは100
} else if(x > 20){
	console.log("2番目のxは" + x);
}

このコードでは1番目のxが10より大きくて(11からで10は含まない)、2番目のxが20より大きい(21からで20は含まない)時に、処理を実行するif文です。実際にconsole.log();(consoleオブジェクトのlogメソッド)で表示されるのは、1番目のxは100のみです。

このことから、if文は条件が成立したら処理を実行するというより、正確には、最初の条件が成立したらそこで処理を実行して停止すると言ったほうが正しいと思います。

let x = 100;で変数のxには100の値が代入されて、Xの値は100になっています。2番目のxが20より大きい時のif文の条件も成立していますが、1番目が成立してその処理を実行すると(このif文での処理の実行はconsole.log();)、if文は、例え、その後の条件が合致していても実行しない(このif文では2番目のconsole.log();は実行しない)ので、条件に合致した処理を連続して実行することはif文ではできない(例外もあります)ことが、if文を使う時に注意することです。

if文は条件に合致した中で、その中の最初の処理を実行します。ただし、if文で複数条件の合致で全て実行に書いていますが、例外もあります。

if文でのelse

もう1つ、if文で注意するのは、elseの使いかたです。if文は最初のif文で条件が成立しなければ次のelse ifで、そのまた次のelse ifでというように、else ifで複数の条件で制御文を作ることができます。

そして、最後にelseを書く時には、条件文を書くとエラーになります。以下のコードを見てみます。

let x = 100;

if(x > 100){
	console.log("1番目のxは" + x);
} else if(x > 101){
	console.log("2番目のxは" + x);
}else(x > 10){
	console.log("3番目のxは" + x);
}

コンソール画面に出る結果は、Uncaught SyntaxError: Unexpected tokenでエラーになっています。

このif文では1番目のxは101からでないと不成立なのでfalseで、2番目もfalseになって、3番目のelseの条件式ではtrueになっています。しかし、このif文ではエラーになっています。最後のelseに()の条件式を(無理やり)付けているからです。

最後のelseでは条件を書くとif文がエラーになるので、条件式を付ける時には、先頭のifかelse ifのどちらかにします。

if文の最後に置くelse文は、以下のコードのように条件式の()を付けずに使えば、問題なく動作します。

let x = 100;

if (x > 100) {
	console.log("1番目のxは" + x);
} else if (x > 101) {
	console.log("2番目のxは" + x);
} else if (x > 102) {
	console.log("3番目のxは" + x);
} else {
	console.log("xの値は" + x + "です。") // xの値は100です。
}

1番目から3番目までの条件のどれも不成立なので、最後のelse文のconsole.log();で、xの値は100です。と表示されます。