if と else で判断する

if 文は、条件が true のときだけコードのブロックを実行します。else if を使うと、JavaScript は上から条件を確かめ、最初に true になったところで止まります。

ときどきだけ実行するコード

ここまでのプログラムは、どの行も毎回実行してきました。役に立つプログラムは、状況によってちがう動きをします。ゲームは得点が十分に高いときだけ "You win" と表示し、店は注文が少ないときだけ送料を加えます。JavaScript が選ぶための方法が if 文です。

const temperature = 31;
if (temperature >= 30) {
  console.log("Hot day. Drink water.");
}
console.log("Done");

条件は if という語のあとのかっこの中に書きます。条件は真偽値を生み出す式なら何でもよく、ふつうは前の単元で学んだ比較です。true のときに実行するコードは波かっこの中に書き、これがブロックになります。条件が false なら、JavaScript はブロック全体を飛ばして、閉じ波かっこのあとから続けます。上の例では両方の行が表示されます。temperature を 20 に変えると、"Done" だけが表示されます。ブロックの中の行は空白二つ分字下げしてあります。JavaScript に字下げは必要ありませんが、どの行が if に属しているかがひと目でわかります。経験のあるプログラマーはだれでも字下げを期待します。

else：もう一つの道

条件が true のときはあることを、false のときは別のことをしたい場面はよくあります。そのときは else ブロックを加えます。二つのブロックのうち、実行されるのはちょうど一つです。両方が実行されることも、どちらも実行されないこともありません。

const n = 7;
if (n % 2 === 0) {
  console.log(n + " is even");
} else {
  console.log(n + " is odd");
}
// 表示: 7 is odd

else if：三つ以上の選択肢

いくつもの可能性があるときは、else if で条件をつなげます。JavaScript は上から順に確かめます。一つが true になったとたんにそのブロックを実行し、残りはすべて飛ばします。あとの条件が true になる場合でも同じです。最後の else は、上のどれにもあてはまらなかったものをすべて受け止めます。

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("F");
}
// 表示: C

条件の順番は大切です。得点が 95 なら、最初の条件ですでに true になり、A が表示されます。もし条件を逆の順番で、score >= 70 から書いていたら、95 点は最初の条件で止まり、C と表示されてしまいます。このように範囲が重なるときは、いちばんせまい条件を先に置きます。手でコードをたどるのはよい習慣です。値を一つ決め、上から読み、どの分岐に進むかを声に出して言ってみましょう。

入れ子と組み合わせ

ブロックの中に別の if 文を入れることができます。これを入れ子と呼びます。前の単元の && や || で条件を組み合わせれば、深い入れ子を避けられることがよくあります。次の二つのコードは同じ仕事をしますが、二つ目のほうが読みやすくなっています。

if (age >= 8) {
  if (height >= 120) {
    console.log("You can ride");
  }
}

if (age >= 8 && height >= 120) {
  console.log("You can ride");
}

条件演算子

二つの値からどちらかを選ぶだけなら、条件（三項）演算子という短い書き方があります。condition ? valueIfTrue : valueIfFalse です。たとえば const label = n % 2 === 0 ? "even" : "odd"; のように書きます。値を選ぶ短い場面で使いましょう。いくつもの文を実行するときは、ふつうの if と else のほうがわかりやすくなります。

よくあるうっかりミスは、条件の中に等号を一つだけ書くことです。if (score = 100) と書くと、比べるのではなく score に 100 を入れてしまい、ブロックが毎回実行されます。比べるときはいつも === を使いましょう。