TypeScript入門else if構文を理解しよう

elseを省略しよう

if構文ではelse以降を省略することができます。これは、条件に合ったときだけプログラムを動作させ、合わなかったときは特になにもしないと言ったときに使うことができます。

例えばここでは、所持金が1000円に満たなかった場合は、1000円にするというプログラムを作ってみましょう。

// if02.ts
let mymoney = 800; // 現在の所持金は800円

if (mymoney < 1000) {
  mymoney = 1000; // 1000円に満たない場合は1000円にする
}
console.log(mymoney); // 1000が表示されます

この場合、画面には1000と表示されます。

mymoneyが1000未満だったため、1000を代入している訳です。しかし、ここで最初の所持金を1000以上に設定してみましょう。

let mymoney = 1200;

すると、画面には1200がそのまま表示されます。所持金が1000以上だったため、代入するプログラムが無視されたというわけです。

複数の条件を組み合わせるelse if

さらに例えば、次のようなプログラムを考えましょう。

所持金が800円以上なら書籍を買い、800円未満だが600円以上の場合はお菓子を買う

この場合、処理を分解して考えましょう。まずは、所持金が800円以上かどうかを判断します。

let mymoney = 1000; // 所持金は1000円

if (mymoney >= 800) {
  console.log('書籍を買いました');
}

これで、所持金が800円以上の場合は、書籍が買えました。しかし、それより低くすると、現状ではなにも表示されません。

let mymoney = 600;

そこで、次のようにプログラムを追加してみましょう。

let mymoney = 600; // 所持金は1000円

if (mymoney >= 800) {
  console.log('書籍を買いました');
}
if (mymoney >= 600) {
  console.log('お菓子を買いました');
}

これでプログラムを動かすと、一見うまく動いているように見えます。しかし、所持金を800円以上にすると、おかしな事が起こります。

let mymoney = 1000;

すると、書籍もおかしも両方買ってしまうのです。

お菓子を買うかどうかの判断は「書籍が買えなかったとき」にだけ行う必要があります。そこで、次のように修正ができます。

let mymoney = 600; // 所持金は1000円

if (mymoney >= 800) {
  console.log('書籍を買いました');
} else {
  if (mymoney >= 600) {
    console.log('お菓子を買いました');
  }
}

600円の判断を、800円の条件が合わなかったときの「else」の中に含めました。これでプログラムが正しく動作します。

これを「if構文の入れ子構造」などと言います。実際に利用されるテクニックではあるものの、入れ子構造は見た目がかなり複雑で分かりにくいプログラムになってしまいます。

そこでこの場合「else if」という特別な構文を使うことができます。次のように変更しましょう。

let mymoney = 600; // 所持金は1000円

if (mymoney >= 800) {
  console.log('書籍を買いました');
} else if (mymoney >= 600) {
    console.log('お菓子を買いました');
}

「else」の後の中括弧（{}）が省略され、直接次のif構文がつながっています。こうすることで、中括弧の数を減らしてスッキリ表示することができます。

先の入れ子構造と動きは変わらないため、無理に使う必要はありませんが、このようにスッキリとプログラムを整理するという方法も覚えていくと良いでしょう。