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)
- {
- 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.jpg]()
forEach 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) => {
- document.write(" number=:" + nos);
- })
- }
- }
- window.onload = () => {
- var call = new A();
- call.lognumber();
- }
Output ![foreach0-in-typescript.jpg]()