TypeScript ‘for…of’ Loop

In TypeScript, You can iterate over iterable objects (including array, map, set, string, arguments object and so on) using for...of loop. To be an iterable, an object must implement the @@iterator method.

Loop over Array

Example of using 'for...of' to iterate over array elements.

let myArray = [10, 20, 30]; 
 
for (let value of myArray) { 
  console.log(value); 	//10 20 30
} 

Loop over Map

Example of using 'for...of' to iterate over map entries.

let map = new Map();
map.set("A",1);
map.set("B",2);
map.set("C",3);	

//Iterate over map keys
for (let key of map.keys()) {
    console.log(key);					//A B C
}

//Iterate over map values
for (let value of map.values()) {
    console.log(value);					//1 2 3
}

//Iterate over map entries
for (let entry of map.entries()) {
    console.log(entry[0], entry[1]);	//"A" 1 "B" 2 "C" 3
}

//Using object destructuring
for (let [key, value] of map) {
    console.log(key, value);			//"A" 1 "B" 2 "C" 3
} 

Loop over Set

Example of using 'for...of' to iterate over set entries.

let mySet = new Set();
mySet.add('A');
mySet.add('B');
mySet.add('C');

//Iterate over set 
for (let entry of mySet) {
    console.log(entry);		//A B C
}

Loop over String

Example of using 'for...of' to iterate over string. During iteration, you will get one single character from string in each loop cycle.

let blogName:string = "howtodoinjava.com";

//Iterate over set 
for (let character of blogName) {
    console.log(character);		//howtodoinjava.com
}

Drop me your questions in comments section.

Happy Learning !!