Start learning free

LESSON 116 OF 348 · WHILE LOOPS & FOR LOOPS

While Loop in TypeScript: Initialization and Condition

Lesson Read the full explanation

We can achieve many different outcomes with while loops.

For example, we can print print all the numbers from 0 through 4:

let i = 0;
while(i < 5) {
	console.log(i);
	i++;
}

The output of this program is:

0
1
2
3
4

And this is what the computer does behind the scenes during this loop:

0. Creates and initializes a variable i = 0

1. First iteration:
	a. Is i < 5 true? <=> Is 0 < 5 true? Yes. 
	b. console.log(i); => Output: 0
	c. i++; => i = 1
	
1. Second iteration:
	a. Is i < 5 true? <=> Is 1 < 5 true? Yes. 
	b. console.log(i); => Output: 1
	c. i++; => i = 2
	
2. Third iteration:
	a. Is i < 5 true? <=> Is 2 < 5 true? Yes. 
	b. console.log(i); => Output: 2
	c. i++; => i = 3
	
3. Forth iteration:
	a. Is i < 5 true? <=> Is 3 < 5 true? Yes. 
	b. console.log(i); => Output: 3
	c. i++; => i = 4
	
4. Fifth iteration:
	a. Is i < 5 true? <=> Is 4 < 5 true? Yes. 
	b. console.log(i); => Output: 4
	c. i++; => i = 5

5. Sixth iteration:
	a. Is i < 5 true? <=> Is 5 < 5 true? No.
	b. Exit the loop.

Assignment
Let's print all numbers from 3 to 10 using a while loop.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 4
    Ctrl + Enter to check

    TYPESCRIPT · WHILE LOOPS & FOR LOOPS

    Printing Numbers in TypeScript, explained

    Counting with a while loop

    A while loop can produce a sequence of numbers if a variable changes by the same amount on every pass. The variable's starting value decides where the sequence begins, the condition decides where it ends, and the update decides the step. These are the loop's initialization, condition and update.

    This program prints the numbers from 0 through 4:

    let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

    0
1
2
3
4

    The sequence ends at 4 and not at 5, because the condition i < 5 is false once i reaches 5, and the body does not run for that value.

    What the computer does

    Here is the loop one step at a time:

    1. i is created with the value 0.
    2. Is 0 < 5? Yes. Print 0. i++ makes i equal to 1.
    3. Is 1 < 5? Yes. Print 1. Now i is 2.
    4. Is 2 < 5? Yes. Print 2. Now i is 3.
    5. Is 3 < 5? Yes. Print 3. Now i is 4.
    6. Is 4 < 5? Yes. Print 4. Now i is 5.
    7. Is 5 < 5? No. Exit the loop.

    The order inside the body matters. The number is printed first and incremented second, so the value shown is the one that passed the check. If you swapped the two lines, the loop would print 1 to 5 instead.

    Choosing the start and the end

    Two decisions control which numbers appear:

    • The start is the initial value. A loop that begins with let counter: number = 3; prints 3 first.
    • The end depends on the comparison operator. counter < 10 stops before 10. counter <= 10 includes it.

    To include the last number, use <= with that number, or < with the number after it. Both work, and which one reads better depends on the task. When the task says "from 3 to 10", with 10 included, <= 10 matches the wording most directly.

    The exercise

    The assignment is to print every number from 3 to 10 with a while loop, one number per line. Four steps build it:

    1. Declare the counter with the start value: let counter: number = 3;. It is let because the loop changes it.
    2. Write the loop with the condition counter <= 10. It uses <= so that 10 is printed too.
    3. Print the counter in the body with console.log(counter). Each call ends the line, so every number lands on its own line.
    4. Increase the counter with counter++. Without it the value stays at 3 and the condition is true forever.
    let counter: number = 3;
while (counter <= 10) {
    console.log(counter);
    counter++;
}

    The output is the eight lines 3, 4, 5, 6, 7, 8, 9 and 10. When the loop ends, counter is 11, because the update runs after the last print and the following check fails. If you used the variable after the loop, you would find 11 in it.

    Common mistakes

    • Stopping one number early. With counter < 10 the output ends at 9. Always check the last value against the task.
    • Starting at the wrong number. Starting the counter at 0 or 1 prints extra lines before 3. Check the first value too.
    • Forgetting the update. The program prints 3 again and again and never finishes.
    • Declaring the counter inside the loop. A let inside the body is created again on every pass, so it would restart at 3 each time. Declare it before the loop.
    • Printing a string by accident. console.log("counter") with quotes prints the word, not the number. Without quotes it prints the value.

    Key takeaways

    • A counting loop has an initialization, a condition and an update.
    • The initial value is the first number the loop sees, and the condition decides where it stops.
    • <= includes the end value and < excludes it.
    • When the loop ends, the counter holds the first value that failed the condition.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free