Thursday, August 30, 2018

Typescript - For Loop Tutorials with examples

for loop tutorial

Every programming language provides iteration features. For loop is one the way to do iteration. Typescript also provides loop over specific times for executing code block. For Loop is used to iterate the elements from an array, map, set and objects.
There are many ways we can do for loop for iteration of elements. Typescript provides different variations for iterations.

forLoop Syntax

for(initial value; condtion:  countervalue){
// code block
}
This contains for keyword followed by four statements including parenthesis.
 Three statements enclosed in braces and separated by semicolons.
The initial value is used to initialize the value.
Condition expression: It checks and returns the truth value, if it is true, code block statements are executed. if false, for loop breaks the execution
Counter value - used to increment /decrement the value of the variable

example

for (var i = 1; i <= 5; i++){         
console.log('test')
} 
In this loop, First it is initialized with i=1, and code block body executes as long as condition i<=5 is true, and i value is increased by 1 using i++. This loop executes 5 times and output string 'test' five times.

Limitations 

  • break and continue keywords will not works in this loop.
  • value is not returned inside the loop using the return keyword

 For...in loop examples

This is another way for iteration of arrays using indexes. This is used to iterate enumerable objects. Any object which has a property of enumerable elements like an array, JSON strings enumerable objects are kind of object properties.

Syntax

for(var variable in collection){
}
the variable is declared using var or let keyword and type of variable is string or number or any supported type 

Example

let arrayData = [8, 9, 13];
for (let element in arrayData) {
  console.log(typeof(element));   //string string string
  console.log(element);   //0 1 2
  console.log(arrayData[element]);   //8 9 13
}

Limitations 

  • It Actually will not iterate over elements and iterates over the keys of the objects.in case of an array, you will get indexes, not actual elements. 
  • value is an index which is of type string, not number, so when you are adding numbers with this values gives append not adding numbers. ie "1"+"2"= 12 instead of 3 value 

for...of loop

Es6 has for...of loop, Typescript introduced the same for...of loop mechanism For of loop is used to do an iteration of iterable objects like array and strings. Here objects are iterable which are strings, arrays 

syntax

for(let/var variable of object){}

Example 

let str = "This is for...of loop example";
for (var character of str) {
    console.log(character); // This is for...of loop example
}

It is a simple and easy way of doing iteration with this. All the limitations for and for...in loops are solved with this.

Limitations 

  • The return, break, continue keywords works as expected.
  • for...of loop only works on iteration of strings and array. This limitation will be removed in future typescript versions.

Related article


EmoticonEmoticon