While loop in TypeScript

By Jun 07, 2018

Description:

Here we explain how to use the while loops in TypeScript. We deal with both forms of the while loop and we give several examples.

Preferencesoft

while loop is a statement used to repeat a sequence of instruction as long as a Boolean condition is true. When the condition becomes false, execution continues after the statement or statement block of while.

While loop statement

The most used form of the while statement is the one in which the Boolean condition is evaluated before the instruction sequence is executed. It gives more control to the programmer, which can prevent the loop statements from running at least once.

While (condition) instruction;

or

while (condition) {
    //statements
}

flow chart

We will start with an example of a while loop that displays a list of items numbered from 1 to 9.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning TypeScript</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="while1.js"></script>
</head>
<body>
 <h1>Demo</h1>
   <div id="listz"></div>
</body>
</html>

///<reference path="typings/globals/jquery/index.d.ts" />

class While1 {
    _itemNumber: number;

    constructor(itemNumber: number) {
        this._itemNumber = itemNumber;
    }

    GenerateList() : string {
        let i=0;
        let s:string = "<ul>";
        while (i++ < 9) {
            s += "<li>item" + i + "</li>"
        }
        return s+"</ul>";
    }
}

let whi = new While1(5);

$(document).ready(function () {
    let str:string =whi.GenerateList();
    $('#listz').append(str);
});

Output:
  • item1
  • item2
  • item3
  • item4
  • item5
  • item6
  • item7
  • item8
  • item9

Now display a numbered list whose items are the integers between sqrt(5) and sqrt(50).

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning TypeScript</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="while2.js"></script>
</head>
<body>
 <h1>Demo</h1>
   <div id="list"></div>
</body>
</html>

///<reference path="typings/globals/jquery/index.d.ts" />

class While2 {
    
    GenerateList() : string {
        let i=3;
        let s:string = "<ul>";
        while (i<= Math.sqrt(50.0)) {
            s += "<li>" + i + "</li>"
            i++;
        }
        return s+"</ul>";
    }
}

let wh = new While2();

$(document).ready(function () {
    let str:string =wh.GenerateList();
    $('#list').append(str);
});

Output:
  • 3
  • 4
  • 5
  • 6
  • 7

Now display the elements of an array of words ending with the first word dog encountered or the last of the table.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning TypeScript</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="while3.js"></script>
</head>
<body>
 <h1>Demo</h1>
   <div id="listarray"></div>
</body>
</html>

///<reference path="typings/globals/jquery/index.d.ts" />

class While3 {

    GenerateList() : string {
        let arr=["cat", "flower", "bee", "dog", "mouse"];
        let s:string = "<span>";
        let notdog : boolean = true;
        let i=0;
        while (notdog && i < arr.length) {
                if (arr[i] != "dog") {
                    s += arr[i] + "&nbsp";
                } else {
                    s += "dog";
                    notdog = false;
                }
                i++;  
        }
        return s+"</span>";
    }
}

let w = new While3();

$(document).ready(function () {
    let str:string =w.GenerateList();
    $('#listarray').append(str);
});

Output:
cat flower bee dog

Do ... While loop statement

Do … while is a statement like the while Loop statement but it executes at least once the instruction or sequence of instructions between do and while as long as the condition is evaluated to true.

do {
   //statements 
} while(condition)

When using do... while, it must be considered that the instructions of the block between do and while will be executed at least once and thus prevent them from performing unwanted irreversible actions.

flow chart do while

Now display all the dividers of an integer > 0.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning TypeScript</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="while4.js"></script>
</head>
<body>
 <h1>Demo</h1>
   <div id="divisorlist"></div>
</body>
</html>

///<reference path="typings/globals/jquery/index.d.ts" />

class While4 {

      GenerateList(n:number) : string {
        let s:string = "<span>Divisors of " + n + ":&nbsp 1";
        let i=2;
        do {
                if (n % i ==0)
                    s += ",&nbsp" + i;
                i++; 
            } 
        while (i<=n);
        return s+"</span>";
    }
}

let whil = new While4();

$(document).ready(function () {
    let str:string =whil.GenerateList(99);
    $('#divisorlist').append(str);
});

Output:
Divisors of 99:  1, 3, 9, 11, 33, 99

TypeScript

Categories

Share

Follow


KodFor Privacy Policy