Multiple ways to use for loops to iterate objects in typescript

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

Typescript for loop tutorials

Typescript also provides a loop over specific times for executing code blocks. 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 the iteration of elements.

Typescript provides different variations or iterations.

normal for loop in typescript

This is a basic normal for loop in typescript.

for(initial value; condition:  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

Here is a 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 outputs the 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

Typescript For-in loop examples

It is another way to iterate arrays using indexes. It is used to iterate enumerable objects. Any object which has a property of enumerable elements like an array, or 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

Here is For in loop Example.

Here is an example of a loop for the iteration of the 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
}

For in-loop 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 value gives append not adding numbers. ie “1”+“2”= 12 instead of 3 value

for…of the loop in typescript

Es6 introduced the 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, and arrays.

syntax:

for(let/var variable of object){}  

for of loop 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.

for of loop Limitations:

• The return, break, and 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