【JavaScript】条件分岐① if【自己学習】

if命令でできること

if命令によって、「もし〇〇ならば✕✕を行う」というように、一定の条件を満たすか否かに応じて実行する処理を変える（分岐させる）ことができる。

条件を満たす場合の処理を指定する - if -

if命令の中に与えられた条件式の真偽値がtrue(真)の場合、指定した処理が実行される。

if-1.js

let i = 14;
if (i >= 10) {
  console.log("iは10以上です"); // > iは10以上です
}

変数iの値は14であり、条件式「i >＝ 10」を満たす（真偽値がtrueである）ため、処理が実行され「iは10以上です」とコンソールに表示される。仮に変数iが10未満の場合、条件式を満たさないため処理は実行されず何も表示されない。

条件を満たさない場合の処理を指定する - else -

条件を満たす場合だけでなく、満たさない（真偽値がfalseである）場合の処理も指定したい場合は、elseを使うことで処理を実行できる。

else-1.js

let i = 8;
if (i >= 10) {
  console.log("iは10以上です"); //処理は実行されない
} else {
  console.log("iは10未満です"); // > iは10未満です
}

変数iの値は8であり、条件式「i >= 10」を満たさないため、「iは10以上です」は表示されない。しかしelseを使って指定した処理は実行され「iは10未満です」とコンソールに表示される。

分岐を追加する - else if -

ifとelseのみでは2つしか処理を分岐させるとこができないが、else ifを使って分岐を追加することができる。

elseif-1.js

let i = 8;
if (i >= 10) {
  console.log("iは10以上です");
} else if (i >= 5 ) {
  console.log("iは5以上です");  // > iは5以上です
} else {
  console.log("iは5未満です");
}

変数iの値は8であり、条件式「i >= 10」を満たさないため、「iは10以上です」は表示されない。しかしelse ifを使った条件式「i >= 5」は満たすため、指定した処理は実行され「iは５以上です」とコンソールに表示される。

処理が実行される順番

複数の条件式を満たす場合、実行されるのは一番最初に条件を満たした処理のみとなる。そのためif命令は記述する条件式の順番にも注意が必要。

elseif-2.js

let i = 8;
if (i >= 10) {
  console.log("iは10以上です");
} else if (i >= 3 ) {
  console.log("iは3以上です");  //iは3以上です
} else if (i >= 5 ) {         //以降の処理は条件式を満たしていても実行されない
  console.log("iは5以上です");
} else {
  console.log("iは5未満です");
}

複数の条件式のうち、2番目の「i >= 3」と３番目の「i >= 5」を満たすが、記述上最初に「i >= 3」を満たすため「iは3以上です」とコンソールに表示される。