【Javascript】 for文 (ループ) 理解度チェック

連続した数値を利用する際は、for文のインデックスを利用するのが楽です。

// iがインデックス
for (let i = 0; i < 5; i++) {
    console.log(i + 1);
}

もちろんfor (let i = 1; i <= 5; i++) {...}のように1からスタートしても良いです。しかし、for文の多くは0からスタートし、<の記号を条件にします。

合計値を保存する変数をforの外に用意し、for文内でそれに値を足していきます。

let sum = 0;
for (let i = 0; i < 10; i++) {
    sum += i + 1;
}

console.log(sum);

これはFizzBuzz問題という非常に有名な問題です。あまりの計算、for文、if文の3つを使った、プログラミングの基礎や、それをもとに簡単なアルゴリズムが作れるかを確認できます。

3の倍数とは、3で割った余りが0、5の倍数は5で割った余りが0です。3の倍数かつ5の倍数は、15の倍数と考えても良いです。

これを、for文で1から順に判定していきます。

// 今回は i = 1 でスタート
for (let i = 1; i <= 100; i++) {
    if (i % 15 == 0) {
        console.log("FizzBuzz");
    }
    else if (i % 3 == 0) {
        console.log("Fizz");
    }
    else if (i % 5 == 0) {
        console.log("Buzz");
    }
    else {
        console.log(i);
    }
}

ここで、よくある間違いとして、

if (i % 3 == 0) {
    console.log("Fizz");
}
else if (i % 5 == 0) {
    console.log("Buzz");
}
else if (i % 15 == 0) {
    console.log("FizzBuzz");
}
else {
    console.log(i);
}

と並べてしまうことです。この並びだと、3の倍数を満たしているとFizzが出力されますが、3の倍数かつ5の倍数 (15の倍数) を満たしていてもFizzと表示されます。これは、if文で条件を満たすと、その一連のif文にあるelseは実行されないためです。

そのため、必ず優先順位が高い方を一連のifの上に持ってくる必要があります。

急に難しくなりましたね。2重のfor文、文字列の連結、文字列の改行といった複数の要素が組み合わさっているためです。これができれば、大学や専門大1年生の上半分には食い込めます。

まずは、for文を使って1行だけ表示することを考えてみましょう。

#####と改行を出力するためには、#を5個つなげたあとに改行する必要があるので、

let s = "";
for (let x = 0; x < 5; x++) {
    s += "#";
}
s += "\n";

のようにして#を5回つなげる+改行をします。これを3回繰り返します。

let s = "";
for (let y = 0; y < 3; y++) {
    for (let x = 0; x < 5; x++) {
        s += "#";
    }
    s += "\n";
}

// #####\n#####\n#####\n が出力される
console.log(s);

forのインデックスがxとyになっているのは、2次元の座標に見立てているためです。外のループがyなことに注意しましょう。

ちなみに、スコープの知識があれば、次のように簡略化できます。

for (let y = 0; y < 3; y++) {
    let s = "";
    for (let x = 0; x < 5; x++) {
        s += "#";
    }
    console.log(s);
}

スコープについては、下の記事を見てください。

【Javascript】 スコープとブロック – プログラミング入門

スコープとは、宣言した変数などが利用できる範囲のことです。これをうまく活用すると、思わぬバグを防いだり、変数名の重複で悩むことが減少します。 構…