{

Multiple ways to use for loops to iterate objects in typescript


typescript for loop tutorials with examples

Every programming language provides iteration features. For loop is one of the ways to do iteration.

Typescript for loop

Typescript also provides a 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 or iterations.

normal for loop in typescript

for(initial value; condtion:  countervalue){  
// code block  
}  

It contains the for keyword followed by four statements including parenthesis.

Three statements are 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

for loop example

In this loop, First, it is initialized with i=1, and the code block body executes as long as condition<=5 is true, and the value(i) is increased by 1 using i++.

for (var i = 1; i <= 5; i++){           
  console.log('test')  
} 

This loop executes 5 times and output string ‘test’ five times.

Limitations

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

For in loop examples

It is another way for iteration of arrays using indexes. It 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 the var or let keyword and the type of variable is string or number or any supported type

Example

Here is an example for in loop for iteration of array.

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

  • Actually, It will not iterate over elements and iterates over the keys of the objects. In the case of arrays, 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 introduced for of loop syntax. Typescript introduced the same for...of loop mechanism. It is used to do an iteration of enumerable objects like array and strings.

Here objects are enumerable that 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 syntax. 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 the iteration of strings and array. It is a limitation that is removed in future typescript versions.

Conclusion

You learned different variations of for loop in typescript to iterate enumerable objects like an array, strings, set, and json objects with examples

  • normal for loop
  • for-in loop
  • for of loop
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.