TypeScript Map is a new data structure introduced in ES6. A Map
allows storing key-value pairs (i.e. entries), similar to the maps in other programming languages e.g. Java HashMap.
As Map is a collection, meaning it has a size, an order and we can iterate over its keys and values.
1. Creating a Map
Use Map
type and new
keyword to create a map in TypeScript.
let myMap = new Map<string, number>();
To create a Map with initial key-value pairs, pass the key-value pairs as an array to the Map
constructor.
let myMap = new Map<string, string>([
["key1", "value1"],
["key2", "value2"]
]);
2. Add, Retrieve, Delete Entries from Map
The common operations available in a Map
are:
map.set(key, value)
– adds a new entry in theMap
.map.get(key)
– retrieves the value for a given key from theMap
.map.has(key)
– checks if a key is present in theMap
. Returns true or false.map.size
– returns the count of entries in theMap
.map.delete(key)
– deletes a key-value pair using its key. If key is found and deleted, it returns true, else returns false.map.clear()
– deletes all entries from the Map.
let nameAgeMapping = new Map<string, number>();
//1. Add entries
nameAgeMapping.set("Lokesh", 37);
nameAgeMapping.set("Raj", 35);
nameAgeMapping.set("John", 40);
//2. Get entries
let age = nameAgeMapping.get("John"); // age = 40
//3. Check entry by Key
nameAgeMapping.has("Lokesh"); // true
nameAgeMapping.has("Brian"); // false
//4. Size of the Map
let count = nameAgeMapping.size; // count = 3
//5. Delete an entry
let isDeleted = nameAgeMapping.delete("Lokesh"); // isDeleted = true
//6. Clear whole Map
nameAgeMapping.clear(); //Clear all entries
3. Iterating over Map
The Map
entries iterate in the insertion order. A for-each loop returns an array of [key, value]
pairs for each iteration.
Use 'for...of'
loop to iterate over map keys, values, or entries.
map.keys()
– to iterate over map keysmap.values()
– to iterate over map valuesmap.entries()
– to iterate over map entriesmap
– use object destructuring to iterate over map entries
let nameAgeMapping = new Map<string, number>();
nameAgeMapping.set("Lokesh", 37);
nameAgeMapping.set("Raj", 35);
nameAgeMapping.set("John", 40);
//1. Iterate over map keys
for (let key of nameAgeMapping.keys()) {
console.log(key); //Lokesh Raj John
}
//2. Iterate over map values
for (let value of nameAgeMapping.values()) {
console.log(value); //37 35 40
}
//3. Iterate over map entries
for (let entry of nameAgeMapping.entries()) {
console.log(entry[0], entry[1]); //"Lokesh" 37 "Raj" 35 "John" 40
}
//4. Using object destructuring
for (let [key, value] of nameAgeMapping) {
console.log(key, value); //"Lokesh" 37 "Raj" 35 "John" 40
}
Happy Learning !!
What is the purpose of using the Map() iterator in javascript?
how to update map key
Keys are not supposed to be updated in maps.
I have a map that consists of key, value pairs where value is in the form of an array of objects i.e. basically of the form
myMap
a, 123
b , 45
c, 6789
I tried printing it on the console with the help of nested for loops but it just won’t run.
Could you help me out ??
How to import this Map in typescript file???
You don’t need to import anything. It’s part of the language.