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で処理したことしかなかったので、勉強になりました。