YouTip

Sometimes, we may need to execute the same block of code multiple times. Generally, statements are executed sequentially: the first statement in a function is executed first, followed by the second, and so on. Programming languages provide various control structures for more complex execution paths. Loop statements allow us to execute a statement or group of statements multiple times. The following is a flowchart of loop statements in most programming languages:  * * * ## for Loop The TypeScript `for` loop is used to execute a sequence of statements multiple times, simplifying the code for managing loop variables. ### Syntax The syntax is as follows: for ( init; condition; increment ){ statement(s);} Here is the control flow analysis of the `for` loop: 1. The **init** step is executed first, and only once. This step allows you to declare and initialize any loop control variable. You can omit this statement as long as a semicolon appears. 2. Next, the **condition** is evaluated. If it is true, the loop body is executed. If it is false, the loop body is not executed, and control flow jumps to the next statement immediately following the `for` loop. 3. After executing the loop body, control flow jumps back to the **increment** statement. This statement allows you to update the loop control variable. This statement can be omitted as long as a semicolon appears after the condition. 4. The condition is evaluated again. If it is true, the loop executes, and this process repeats (loop body, then increment, then re-evaluate condition). When the condition becomes false, the `for` loop terminates. Here, `statement(s)` can be a single statement or a block of statements. `condition` can be any expression. The loop executes when the condition is true and exits when it is false. ### Flowchart  ### Example The following example calculates the factorial of 5. The `for` loop generates numbers from 5 down to 1 and calculates the product in each iteration. ## TypeScript var num:number = 5; var i:number; var factorial = 1; for(i = num;i>=1;i--){factorial *= i; }console.log(factorial) Compiling the above code yields the following JavaScript code: ## JavaScript var num = 5; var i; var factorial = 1; for(i = num; i>= 1; i--){factorial *= i; }console.log(factorial); Executing the above JavaScript code produces the output: 120 * * * ## for...in Loop The `for...in` statement is used to iterate over the properties of an object or elements of an array. ### Syntax The syntax is as follows: for (var val in list) { //statements } `val` must be of type `string` or `any`. ### Example ## TypeScript var j:any; var n:any = "a b c"for(j in n){console.log(n)} Compiling the above code yields the following JavaScript code: ## JavaScript var j; var n = "a b c"; for(j in n){console.log(n); } Executing the above JavaScript code produces the output: a b c * * * ## for…of, forEach, every, and some Loops Additionally, TypeScript supports `for…of`, `forEach`, `every`, and `some` loops. The `for...of` statement creates a loop iterating over iterable objects. Introduced in ES6, the `for...of` loop replaces `for...in` and `forEach()` and supports the new iteration protocol. `for...of` allows you to iterate over Arrays, Strings, Maps, Sets, and other iterable data structures. ## TypeScript for...of Loop let someArray = [1, "string", false]; for(let entry of someArray){console.log(entry); } `forEach`, `every`, and `some` are JavaScript loop syntaxes. As a superset of JavaScript, TypeScript naturally supports them by default. Since `forEach` cannot return from the iteration, `every` and `some` can be used as alternatives. ## TypeScript forEach Loop let list = [4, 5, 6]; list.forEach((val, idx, array) =>{}); ## TypeScript every Loop let list = [4, 5, 6]; list.every((val, idx, array) =>{return true; }); * * * ## while Loop The `while` statement executes a statement or group of statements as long as the given condition is true. The condition is tested before the loop body is executed. ### Syntax The syntax is as follows: while(condition){ statement(s);} Here, `statement(s)` can be a single statement or a block of statements. `condition` can be any expression. The loop executes when the condition is true. When the condition is false, program flow exits the loop. ### Flowchart !(#) In the diagram, the key point of the `while` loop is that the loop might not execute at all. When the condition is false, the loop body is skipped, and the next statement immediately following the `while` loop is executed. ### Example ## TypeScript var num:number = 5; var factorial:number = 1; while(num>=1){factorial = factorial * num; num--; }console.log("5 factorial is:"+factorial); Compiling the above code yields the following JavaScript code: ## JavaScript var num = 5; var factorial = 1; while(num>= 1){factorial = factorial * num; num--; }console.log("5 factorial is:" + factorial); Executing the above JavaScript code produces the output: 5 factorial is: 120 * * * ## do...while Loop Unlike `for` and `while` loops, which test the loop condition at the head of the loop, the `do...while` loop checks its condition at the tail of the loop. ### Syntax The syntax is as follows: do{ statement(s);}while( condition ); Note that the condition expression appears at the tail of the loop, so the `statement(s)` in the loop will be executed at least once before the condition is tested. If the condition is true, control flow jumps back to the `do` and re-executes the `statement(s)` in the loop. This process repeats until the given condition becomes false. ### Flowchart  ### Example ## TypeScript var n:number = 10; do{console.log(n); n--; }while(n>=0); Compiling the above code yields the following JavaScript code: ## JavaScript var num = 5; var n = 10; do{console.log(n); n--; }while(n>= 0); Executing the above JavaScript code produces the output: 109876543210 * * * ## break Statement The `break` statement has two main uses: 1. When the `break` statement appears inside a loop, the loop is immediately terminated, and program flow continues with the next statement following the loop. 2. It can be used to terminate a `case` in a `switch` statement. If you are using nested loops (i.e., a loop inside another loop), the `break` statement will stop the execution of the innermost loop and start executing the next line of code after that block. ### Syntax The syntax is as follows: break; ### Flowchart !(#) ### Example ## TypeScript var i:number = 1 while(i<=10){if(i % 5 == 0){console.log("in 1~10 the first number divisible by 5 between is : "+i)break}i++ } Compiling the above code yields the following JavaScript code: ## JavaScript var i = 1; while(i<= 10){if(i % 5 == 0){console.log("in 1~10 the first number divisible by 5 between is : " + i); break; }i++; } Executing the above JavaScript code produces the output: in 1~10 the first number divisible by 5 between is : 5 * * * ## continue Statement The `continue` statement is somewhat like the `break` statement. Instead of terminating the loop, `continue` skips the current iteration of the loop and forces the next iteration to begin. For a `for` loop, the `continue` statement causes the increment step to execute. For `while` and `do...while` loops, the `continue` statement re-evaluates the condition. ### Syntax The syntax is as follows: continue; ### Flowchart  ### Example ## TypeScript var num:number = 0 var count:number = 0; for(num=0;num<=20;num++){if(num % 2==0){continue}count++ }console.log("0 ~20 the number of odd numbers between is: "+count) Compiling the above code yields the following JavaScript code: ## JavaScript var num = 0; var count = 0; for(num = 0; num<= 20; num++){if(num % 2 == 0){continue; }count++; }console.log("0 ~20 the number of odd numbers between is: " + count); Executing the above JavaScript code produces the output: 0 ~20 the number of odd numbers between is: 10 * * * ## Infinite Loop An infinite loop is a loop that runs continuously without stopping. Both `for` and `while` loops can create infinite loops. Syntax for creating an infinite loop with `for`: for(;;) { // statements} Example for(;;) { console.log("This code will execute indefinitely") } Syntax for creating an infinite loop with `while`: while(true) { // statements} Example while(true) { console.log("This code will execute indefinitely") }