Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
TypeScript, a superset of JavaScript, brings robust typing to web development, enhancing code quality and maintainability. Among its powerful features is the Map object, a versatile data structure that allows you to store key-value pairs and efficiently retrieve values. Unlike plain JavaScript objects, Map maintains the insertion order of keys and permits keys of any type, providing greater flexibility and performance benefits for complex applications.
In this blog, we'll delve into TypeScript's Map object.
What is TypeScript Map?
In the ES6 version of Javascript, a new data structure called TypeScript map was included. Maps allow us to store data in a key-value pair while also remembering the keys' order was inserted, similar to other programming languages. In the TypeScript map, we can use any value as a key or value.
Map creation in TypeScript
To make a map in TypeScript, use the Map type and the new keyword.
Empty map:
let myMap = new Map<string, number>();
Pass the key-value pairs as an array to the Map constructor to create a Map with initial key-value pairs.
let myMap = new Map<string, string>([
["key1", "value1"],
["key2", "value2"]
]);
Map methods in TypeScript
The TypeScript map methods are listed below.
S No.
Method
Description
1
map.set(key, value)
adds a new entry in the Map.
2
map.get(key)
retrieves the value for a given key from the Map.
3
map.has(key)
checks if a key is present in the Map. Returns true or false.
4
map.delete(key)
deletes a key-value pair using its key. If key is found and deleted, it returns true, else returns false
5
map.size()
returns the count of entries in the Map.
6
map.clear()
deletes all entries from the Map
Example
Below is an example code for the above mentioned methods in maps in TypeScript:
let nameAgeMapping = new Map<string, number>();
//1. Add entries
nameAgeMapping.set("Priyanka", 37);
nameAgeMapping.set("Vaishnavi", 35);
nameAgeMapping.set("Toohina", 40);
//2. Get entries
let age = nameAgeMapping.get("Toohina");
console.log(age); // age = 40
//3. Check entry by Key
console.log(nameAgeMapping.has("Priyanka")); // true
console.log(nameAgeMapping.has("Pakhi")); // false
//4. Size of the Map
let count = nameAgeMapping.size;
console.log( count); // count = 3
//5. Delete an entry
let isDeleted = nameAgeMapping.delete("Priyanka");
console.log(isDeleted) ; //isDeleted = true
//6. Clear whole Map
nameAgeMapping.clear(); //Clear all entries
Output:
Iterating Map Data in TypeScript
In the insertion sequence, the Map entries iterate. We can iterate over map keys, values, or entries using the 'for-each' loop. A for-each loop returns an array of [key, value] pairs for each iteration.
The following methods are used to iterate a map:
map.keys() – used to iterate over map keys
map.values() – used to iterate over map values
map.entries() – used to iterate over map entries
map – use object destructuring to iterate over map entries
The following example will show how a map is iterated in TypeScript:
let nameAgeMapping = new Map<string, number>();
nameAgeMapping.set("Priyanka", 37);
nameAgeMapping.set("Vaishnavi", 35);
nameAgeMapping.set("Toohina", 40);
//1. Iterating over map keys
for (let key of nameAgeMapping.keys()) {
console.log(key); //Priyanka Vaishnavi Toohina
}
//2. Iterating over map values
for (let value of nameAgeMapping.values()) {
console.log(value); //37 35 40
}
//3. Iterating over map entries
for (let entry of nameAgeMapping.entries()) {
console.log(entry[0], entry[1]); //"Priyanka" 37 "Vaishnavi" 35 "Toohina" 40
}
//4. Use object destructuring
for (let [key, value] of nameAgeMapping) {
console.log(key, value); //"Priyanka " 37 "Vaishnavi" 35 "Toohina" 40
}
Output:
Frequently Asked Questions
What is a map in TypeScript?
In ES6, a new data structure called TypeScript Map was introduced. A Map is comparable to other programming languages' maps, such as Java HashMap, in that it may store key-value pairs (i.e., entries). We can iterate through Map's keys and values because it is a collection with a size and order.
Is TypeScript Map a HashMap?
Yes, TypeScript's Map is similar to a HashMap, storing key-value pairs with unique keys and offering fast lookups and updates.
What is the map() method used for?
The map() method creates a new array by applying a provided function to every element of an existing array, without modifying the original.
What is a map file in TypeScript?
A TypeScript map file (.map) links compiled JavaScript code to the original TypeScript source, aiding in debugging by preserving source code references.
Conclusion
In the ES6 version of JavaScript, a new data structure called TypeScript map was included. Maps allow us to store data in a key-value pair while also remembering the keys' order was inserted, similar to other programming languages.
To make a map in TypeScript, use the Map type and the new keyword. We can iterate over map keys, values, or entries using the 'for-each' loop. For more blogs on TypeScript head to the following link.