TypeScript is a syntactic superset of JavaScript means that it shares the same base syntax code but adds something to it. So if you are a novice or don’t know how to iterate over a Map in TypeScript, I will show you some methods with examples. Let’s jump into detail.
What can we do to iterate over a Map in TypeScript?
Method 1: Using forEach()
Using forEach() method is a great way to iterate over a Map in TypeScript.
Syntax:
iterable.forEach(function(currentValue,index,arr),thisValue)
Parameters:
- Function() : (required). A function run for each loop time.
- CurrentValue: (required).The value of the current loop time.
- Index : (optional) The index of the current value.
- ThisValue : (optional) A value passed to the function as its this value.
ForEach() method will call a function for each element in an iterable. So that you can use destructuring way to extract or unpack that values.
Example :
const anMap =new Map<string, any>([['name','Togban'],['age',18],['country','VietNam']])
anMap.forEach((value , key)=>{
console.log(`${key}: ${value}`)
})Output :
[LOG]: "name: Togban"
[LOG]: "age: 18"
[LOG]: "country: VietNam"Method 2: Using for…of
You can use the for…of method to Iterate over a Map in TypeScript.
Syntax:
for( variable of iterable){
Statement
}
For…of method will loop through the values of an iterable object in Map will be pair of key and value and each of pair will be assigned to the variable and you can use destructuring to unpack it
Example :
const anMap =new Map<string, any>([['name','Togban'],['age',18],['country','VietNam']]
)
for(const [key,value] of anMap) {
console.log(`${key}: ${value}`)
}Output :
[LOG]: "name: Togban"
[LOG]: "age: 18"
[LOG]: "country: VietNam"Method 3: Loop through isolate key or value array
In this way, we will separate key and value into arrays by map.keys() or map.values()
map.keys() : return an array that contains all the keys of the map
map.values() : return an array that contains all the values of the map
And then we can use for…of like above
Example :
const anMap =new Map<string, any>([['name','Togban'],['age',18],['country','VietNam']]
)
const keyArray = anMap.keys()
const valueArray = anMap.values()
for (const key of keyArray){
console.log(`key : ${key}`)
}
for (const value of valueArray){
console.log(`value : ${value}`)
}
Output :
[LOG]: "key : name"
[LOG]: "key : age"
[LOG]: "key : country"
[LOG]: "value : Togban"
[LOG]: "value : 18"
[LOG]: "value : VietNam"
If you feel confused about what I just showed you. I recommend you to read more about forEach method, for…of method, destructuring.
Summary
That is all. I have shown and explained some methods to iterate over a Map in TypeScript. You can use the forEach() method, the for…of method. In addition, you will know more ways to do it if you learn advanced TypeScript.
Maybe you are interested:
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm