Post
Ask Question

ForEach In TypeScript

Use a "for loop" as a foreach loop in TypeScript


First, I am going to define what a "for loop" is.

The "for loop" executes a statement or a block of statements repeatedly until a specified expression evaluates to false. The key components of a "for loop" are as follows.

Loop condition

When evaluated to true, will cause the loop body to be repeated.

Loop initialization

During the loop initialization the variables taking part in the loop condition are assigned initial suitable values. The process only occurs once before the loop begins.

Loop update

Update the variables of the loop condition. This is done once for every loop.

Syntax

for( <initialization -statement> ; <loop condition> ; <update statement>){<loop body>}

e.g

for (var n=1;n<=5;n++) {//..................body}

And now I will define what a "foreach loop" is.

The foreach statements repeat a group of embedded statements for each element in an array or in a collection. You do not need to define the loop condition.

Declare foreach In C#


Syntax

foreach (variable type in collection) // In C#

Declare foreach In TypeScript


Syntax

for ( variable type in collection) // In TypeScript

Note

Here, for acts as a foreach loop in TypeScript, only the "for loop" key components are changed.

Now let's talk about the differences between a "for" and "foreach" (TypeScript for) loop.

The "for loop" repeatedly executes astatements until the specified execution evaluates to false whereas a foreach loop repeats a group of embedded statements for each element in array or object collection.

The following examples shows how to use a foreach loop in TypeScript. Use the following instructions to create a program using a for (foreach) loop.

Step 1

Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of your application like "forOrforeach", then click on the Ok button.

Step 2

After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, css file andhtml files.

Step 3

The code of foreach or say "for loop" program.

forOrforeach.ts

  1. class A {  
  2.     function() {  
  3.         var array = [1, 2, 3, 4];  
  4.         for (var v in array) // for acts as a foreach  
  5.         {  
  6.             alert(array[v]);  
  7.         }  
  8.     }  
  9. }  
  10. window.onload = () => {  
  11.     var call = new A();  
  12.     call.function();  
  13. }   

default.html

  1. <!DOCTYPEhtml>  
  2. <htmllang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4.     <head>  
  5.         <metacharset="utf-8" />  
  6.         <title>TypeScript HTML App</title>  
  7.         <linkrel="stylesheet" href="app.css" type="text/css" />  
  8.         <scriptsrc="app.js">  
  9.             </script>  
  10.     </head>  
  11.   
  12.     <body>  
  13.         <h1>For loop as foreach loop in TypeScript</h1>  
  14.         <divid="content" /> </body>  
  15.   
  16.     </html>   

app.js

  1. var A = (function() {  
  2.     function A() {}  
  3.     A.prototype.function = function() {  
  4.         var array = [  
  5.             1,  
  6.             2,  
  7.             3,  
  8.             4  
  9.         ];  
  10.         for (var v in array) {  
  11.             alert(array[v]);  
  12.         }  
  13.     };  
  14.     return A;  
  15. })();  
  16. window.onload = function() {  
  17.     var call = new A();  
  18.     call.function();  
  19. };   

Step 4 Output

ForEach In TypeScript

ForEach In TypeScript
ForEach In TypeScript
ForEach In TypeScript

forEach in TypeScript


And you can implement a foreach statement in TypeScript without "for loop".

newforeach.ts

  1. class A {  
  2.     no: number[] = [1, 2, 3];  
  3.     lognumber() {  
  4.         this.no.forEach((nos) => { // foreach statement  
  5.             document.write(" number=:" + nos);  
  6.         })  
  7.     }  
  8. }  
  9. window.onload = () => {  
  10.     var call = new A();  
  11.     call.lognumber();  
  12. }  
Output
 
ForEach In TypeScript


Similar Articles