Start learning free

LESSON 120 OF 348 · WHILE LOOPS & FOR LOOPS

for Loops in TypeScript: Initialization and Condition

Lesson Read the full explanation

We can achieve many different outcomes with for loops.

It's all about tuning the initialization, condition and iteration statements.

For example, we can print all numbers from 2 through 6:

for (let i = 2; i < 7; i++) {
	console.log(i);
}

The output of this code is:

2
3
4
5
6

Let's break down this code:

  • The initialization statement is let i = 2, so we start iterating from number 2.

  • The condition statement is i < 7. We could've written i <= 6 and it would still be correct.

  • The iteration statement is i++, so we increase our number by 1 every time.

Assignment

Let's print all numbers from 3 through 10 using a for loop.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 2
    Ctrl + Enter to check

    TYPESCRIPT · WHILE LOOPS & FOR LOOPS

    Printing Numbers 3 in TypeScript, explained

    Tuning the loop header

    The same for loop can print very different things, depending on how you set its three parts. This lesson is about the first two: the initialization, which decides where the counting starts, and the condition, which decides where it stops. The exercise is to print every number from 3 through 10.

    Start and stop values

    This loop prints the numbers from 2 through 6:

    for (let i = 2; i < 7; i++) {
    console.log(i);
}

    2
3
4
5
6
    • let i = 2 makes the first value 2.
    • i < 7 lets the loop run while i is at most 6, so 6 is the last value printed. At 7 the condition is false and the loop ends before printing.
    • i++ adds 1 after each pass.

    There are two equally good ways to say "up to and including 6": i < 7 or i <= 6. They produce exactly the same loop for whole numbers. Pick the one that matches how you think about the problem. When the task names the last value to print, <= with that value reads most directly.

    Counting how many times it runs

    For a loop that counts upward by 1, the number of passes is the stop value minus the start value, plus one if the stop value is included. Printing 2 through 6 gives 6 - 2 + 1 = 5 values, and the output above has five lines. This is a quick check against off-by-one mistakes: work out how many lines you expect before you run the code.

    The exercise

    The task is to print all the numbers from 3 through 10. Both ends are included, so the loop must print 3 and also 10, which means 10 - 3 + 1 = 8 lines.

    1. Write the header. Declare i with let, give it the type number, and start it at 3. The condition is i <= 10, so that 10 is printed too. The update is i++.
    2. Print inside the body. console.log(i) writes the current value on its own line.

    The solution in TypeScript

    for (let i: number = 3; i <= 10; i++) {
    console.log(i);
}

    It prints 3, 4, 5, 6, 7, 8, 9 and 10, one per line. The loop variable becomes 11 after the last pass, and the condition 11 <= 10 is false, so the loop ends.

    The annotation : number is optional. Because the loop variable starts as the literal 3, the compiler would infer number without it. Annotations exist only for the compiler. When TypeScript is turned into JavaScript, they are removed, and the loop runs exactly as it would without them.

    Common mistakes

    • Stopping one value too early. With i < 10 the last line is 9. If the task says "through 10", the condition must allow 10.
    • Starting at the wrong value. Starting from 0 or 1 out of habit prints extra numbers before 3. Check the first line of the output as well as the last one.
    • Using = for comparison. A condition has to compare, with <, <=, >, >=, === or !==. i = 10 assigns 10 to i.
    • Printing something other than i. console.log("i"), with quotes, prints the letter i on every line. Without quotes, it prints the variable's value.
    • Forgetting that i is gone after the loop. A variable declared in the header with let cannot be read after the loop, so use a variable declared before the loop if you need its final value.

    Key takeaways

    • The initialization sets the first value, and the condition decides which values still get a pass.
    • i < 7 and i <= 6 are the same for whole numbers. Use <= when you want to name the last value directly.
    • When counting up by 1, the number of passes is last minus first, plus 1.
    • Check both the first and the last line of the output to catch off-by-one errors.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free