if if と if else は違う

タイトルの通り、if文についての個人的に勘違いしていたことです。

やりたかったこと

1~30までの数字を出し、3の倍数の時は「あほ」になり、5の倍数の時は「犬」になる。

最初に書いたコード

var number;

for (var i = 1; i <= 30; i++) {
  number = i;
  if (i % 3 == 0) {
    number = number + "あほ";
  } else if (i % 5 == 0) {
    number = number + "犬";
  }
  document.write(number + "<br>");
}

これで、実際に出たのはこちら。 1 2 3あほ 4 5犬 6あほ 7 8 9あほ 10犬 11 12あほ 13 14 15あほ 16 17 18あほ 19 20犬 21あほ 22 23 24あほ 25犬 26 27あほ 28 29 30あほ

一見できてるっぽいけど、3の倍数でもあり5の倍数でもある15と30に「あほ」としか表示されていません。 つまり、現時点では「3の倍数」であると判断されているということ。

var number;

for (var i = 1; i <= 30; i++) {
  number = i;
  if (i % 3 == 0) {
    number = number + "あほ";　//ここで終わっている
  } else if (i % 5 == 0) {
    number = number + "犬";
  }
  document.write(number + "<br>");
}

なぜこうなるのか？

if{...}else if{...}文は、複数ある{...}のうち、1つしか処理されない。 つまり、今回のコードでは、まず if(i % 3 == 0){...}を処理して、trueだったら　「当てはまるやんけ〜！終わり！」　で、その下の処理は全く見ない。

ではどうしたらいいのか

答えは非常に簡単だった。 else ifをifに変えるだけ。

var number;

for (var i = 1; i <= 30; i++) {
  number = i;
  if (i % 3 == 0) {
    number = number + "あほ";
  }
  if (i % 5 == 0) { //ここをifにする
    number = number + "犬";
  }
  document.write(number + "<br>");
}

こうすると、ifの中身はとりあえず全部処理しようとするので、 一つ目の処理が当てはまっても、 「当てはまったで〜！ほな、次の条件は...おっ、これも当てはまる！」 という感じで、 当てはまるもの全ての処理をする。

今回の式で言うと、

var number;

for (var i = 1; i <= 30; i++) {
  number = i;
  if (i % 3 == 0) {
    number = number + "あほ"; //当てはまったで〜　→ 「あほ」を出力
  }
  if (i % 5 == 0) { 
    number = number + "犬";　//当てはまったで〜　→ 「犬」を出力
  }
  document.write(number + "<br>");
}

//２つにあてはまったら「あほ」「犬」の順番で出力される。

と言うこと。

if文は全部else ifで処理したことしかなかったので、勉強になりました。