Lesson 2

Mastering While Loops with TypeScript

Lesson Overview

Welcome to the world of iterations and loops. Let's dive into TypeScript's while loops! While loops are essential in programming because they allow code to be executed repeatedly while a certain condition remains true. They function similarly to an action that you repeat until a certain condition changes; for instance, cleaning a room until it's no longer messy. The while loop runs as long as the condition is met.

What are While Loops?

while loops in TypeScript are control flow statements that allow a block of code to be executed repeatedly while a given condition remains true. For instance, consider a situation where you keep playing outside while it's sunny. Here's what a while loop in TypeScript might look like:

TypeScript
1let counter: number = 0; // Initialize with 0 2while (counter < 5) { // Loop while counter is less than 5 3 console.log(counter); // Print the counter 4 counter++; // Increment the counter by 1 after each loop iteration 5} 6/* 7Prints: 80 91 102 113 124 13*/

In this example, we initialize a counter with an initial value of 0. The current counter value is then logged as long as its value is less than 5. Once the value reaches 5 or higher, the loop execution stops.

The Syntax of While Loops

A while loop in TypeScript comprises a condition and a body of code. If the condition is true, the code block (body) within the while statement is executed.

TypeScript
1while (condition) { // Loop continues while the condition is true 2 // block of code 3}
Practical Examples with While Loops

Imagine the need to run a countdown from 5 to 1. This can conveniently be achieved using a while loop as follows:

TypeScript
1let number: number = 5; // Initialize with 5 2 3while (number >= 1) { // While number is at least 1 4 console.log('Number is:', number); // Print the number 5 number--; // Decrease the number by one after each iteration 6} 7/* 8Prints: 9Number is: 5 10Number is: 4 11Number is: 3 12Number is: 2 13Number is: 1 14*/
Compound Conditions with While Loops

while loops in TypeScript can use compound conditions utilizing && (and) or || (or). For example, consider a scenario where you're saving up for a bike and want to stop saving once you hit your goal, or when winter starts, whichever comes first:

TypeScript
1let savings: number = 0; // Starting savings 2let isWinter: boolean = false; // Identifying the start of winter 3 4while (savings < 100 && !isWinter) { // Continue while savings is less than 100 and it's not winter 5 savings += 10; // Increase savings by 10 6 console.log('Savings:', savings); 7 8 // Simulate the changing of seasons 9 if (savings === 50) { // When savings equals 50, winter starts 10 isWinter = true; 11 } 12} 13/* 14Prints: 15Savings: 10 16Savings: 20 17Savings: 30 18Savings: 40 19Savings: 50 20*/
Common Pitfalls in Using While Loops

It's crucial to avoid creating an infinite loop in TypeScript, where the condition always remains true, and thereby the loop never ends. In the example below, the increment step is missing, resulting in an infinite loop:

TypeScript
1let counter: number = 0; // Initial counter value 2 3while(counter < 5) { // Counter is always less than 5 4 console.log(counter); 5 // counter++; 6 // Counter isn't increasing (commented), thus creating an infinite loop 7}
Lesson Summary and Practice

Fantastic! You've now learned to use while loops, understood their syntax, and applied them to real-world scenarios. Now it's time to complete some hands-on exercises to solidify these skills. Brace yourself for a fascinating journey into the TypeScript world! Be prepared: adventures lie ahead!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.