こんにちは！

今日は、JavaScriptの繰り返し処理で遊んでみたと言う記事です。
テキストで学習してから、オリジナルで繰り返し処理を作って実行してみました！
正直、今回は、テキストのサンプルコードに似通ってしまいましたが...(泣)

JavaScriptの繰り返しにもいくつかありますが、今回は以下の3種類で遊びました。

for文

while文

do while文

for文

for文の書き方を簡単に紹介します。

for (初期化式; 条件式; 変化式) {
    繰り返したい処理
}

初期化式 = 処理を始める前の初期状態。
条件式 = 処理を繰り返す条件。条件がfalseとなれば、繰り返し処理は終了。
変化式 = 処理を行う条件を変更する。処理が終わるごとに行う。

それでは、遊んでみたコードを見てみましょう！

1. 0〜10の数字を2倍してみた！

テキストのサンプルコードでありがちな感じですが、0〜10の数字を2倍してみました。

function sample1() {
    for (let i=0; i<=10; i++) {
        // 「iが10以下(i<=10)」がtrueの場合、以下の処理を繰り返す。
        result = i*2;
        console.log(result);
    }
}

let sampleResponse1 = sample1();
/*
0
2
4
6
8
10
12
14
16
18
20
*/

2. 配列の要素を取り出してみた！

for文を用いて、配列の要素を取り出してみました。

function sample2(foods) {
    for (let i=0; i<foods.length; i++) {
        console.log(foods[i]);
    }
}

let items = ['チョコレート', 'バナナ', 'クッキー', 'バニラエッセンス'];
let sampleResponse2 = sample2(items);
/*
チョコレート
バナナ
クッキー
バニラエッセンス
*/

こちら、条件式が <=ではなく、<になっているのは、foods.lengthで配列に格納されている要素の数を算出しており、配列のインデックス番号は、要素数から1引くことで求めるためです。
ここでは、iが引数として渡された配列のインデックス番号の最後にくるまで処理を繰り返します。

3. オブジェクトを要素に持つ配列を引数として渡してみた！

さっきの配列とやってることは変わらないのですが、ここでは、要素をオブジェクトにしました。

function sample3(obj) {
    for (let i=0; i<obj.length; i++) {
        console.log(
            `近所の${obj[i].store}で買った「${obj[i].name}」は${obj[i].price}円やったで〜。`
        )
    }
}

let itemList = [
    {
        store: 'マイナスイオン',
        name: 'サーモン',
        price: 280
    },
    {
        store: 'カトーヨーカドー',
        name: 'きゅうり5本',
        price: 108
    },
    {
        store: 'ワーソン',
        name: '特上牛カルビ弁当',
        price: 498
    },
    {
        store: 'ブラザーマート',
        name: 'お父さん食堂の軟骨の唐揚げ',
        price: 350
    },
    {
        store: 'ムーンドラッグ',
        name: 'リージョンマアム',
        price: 85
    }
]

let sampleResponse3 = sample3(itemList);
/*
近所のマイナスイオンで買った「サーモン」は280円やったで〜。
近所のカトーヨーカドーで買った「きゅうり5本」は108円やったで〜。
近所のワーソンで買った「特上牛カルビ弁当」は498円やったで〜。
近所のブラザーマートで買った「お父さん食堂の軟骨の唐揚げ」は350円やったで〜。
近所のムーンドラッグで買った「リージョンマアム」は85円やったで〜。
*/

while文

続いて、while文。
while文は、指定した条件がtrueの間、処理を繰り返します。

while (条件式) {
    繰り返したい処理
}

4. 10以下の間

テキストなどに載ってそうな処理ですね...

function sample4() {
    let i=0;
    while (i<=10) {
        console.log(i);
        i++;
    }
}

let sampleResponse4 = sample4();
/*
0
1
2
3
4
5
6
7
8
9
10
*/

do while文

while文とやることは一緒です。
指定した条件がtrueであれば、繰り返し処理を実行します。
ただ、違うのは、条件式が、最後に書かれているため、1回目は、trueであろうが、falseであろうが、処理が実行されます。最初の1回は必ずです。2回目以降は、trueである場合のみ繰り返し処理が実行されます。

do {
    繰り返したい処理
} while (条件式) // 最後に条件式

5. 最初からfalseの条件でやってみた！

do while文は、少なくとも最初の1回は、処理が実行されます。
最初から、falseの状態だとどうなるか...？

function sample5() {
    let i=1; // iの初期値は1
    do {
        console.log(i);
        i++; // iに+1していく
    } while (i<=0)// iが0以下の場合、繰り返し処理を実行したい
}

let sampleResponse5 = sample5();
// 1

初期値の段階から、falseなのですが、きちんと、実行されています。2回目以降も、falseなので、繰り返し処理は終了しました。

おわりに

今回は、あまり面白い内容を思いつかず、割とベタな、テキストのサンプルコードにありがちな内容になってしまいました。

for...in文やfor...of文はまたの機会に遊んでみようと思います。

そういえば、for文とwhile文・do...while文の使い方はわかったけど、どっちがどういうときに使うのか、「使い分け」がわかっていないな...調べて見つかれば、またそれも投稿してみたいです。

お読み頂き、ありがとうございました！

私自身、まだまだ勉強中の初心者の身ですので、もし、間違いや補足などございましたら、コメントや編集リクエストをお願い致します！！

参考資料

柳井政和著『JavaScript[完全]入門』(2021)

MDN for

MDN while

MDN do...while

繰り返し処理で遊んでみた！【備忘録】