Reader Level:
ARTICLE

ForEach in TypeScript

Posted by Sharad Gupta Articles | TypeScript December 05, 2012
In this article I am going to explain how to use forEach in TypeScript and how a for loop acts as a foreach in TypeScript
  • 0
  • 0
  • 13403

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 and html files.

Step 3

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

forOrforeach
.ts

class A {

    function () {

        var array = [ 1,2,3,4];        

        for (var v in array) // for acts as a foreach

        { 

            alert(array[v]);

        }

      }

}

window.onload = () =>{

    var call = new A();

    call.function();
}


default.html
 

<!DOCTYPEhtml>

 

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h1>For loop as foreach loop in TypeScript</h1>

 

    <divid="content"/>

</body>
</
html>


app.js

 

var A = (function () {

    function A() { }

    A.prototype.function = function () {

        var array = [

            1,

            2,

            3,

            4

        ];

        for(var v in array) {

            alert(array[v]);

        }

    };

    return A;

})();

window.onload = function () {

    var call = new A();

    call.function();

};


Step 4
 

Output

foreach1-in-typescript.jpg


 foreach2-in-typescript.jpg





foreach3-in-typescript.jpg


foreach4-in-typescript.jpgforEach in TypeScript

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

newforeach.ts

class A {

    no: number[] = [1,2,3];

    lognumber()

    {

        this.no.forEach((nos) =>{  // foreach statement

            document.write(" number=:"+nos);

              })

    }

}

window.onload = () =>{

  

    var call = new A();

    call.lognumber();
}

Output

 foreach0-in-typescript.jpg

COMMENT USING

Trending up