TypeScript Map

Introduction

As we have read that maps are used to store data in a key-value pair. Map iterates over each item in the array and returns the key. Maps have a definite size and we can iterate over their keys and values. Now let's see the syntax of creating a map in typescript:

Create a Map

Using the map and new keyword to create a map in typescript. Now let's see how to create a map using initial key-value pairs:

Here in the above syntax, we have created a map with initial key-value pairs. Now lets us see how can we add, retrieve, and delete entries from a map.

Add, Retrieve, Delete Entries from Map

Let's read about the syntax of the operations and how to add, delete and retrieve in a map.

• map.set(key, value)- This syntax is used to add a new entry in the map in typescript.
• map.get(key)- This syntax is used to retrieve the elements from the map in typescript.
• map.delete(key)- This syntax is used to delete the entries from the key, is the given key is present and gets deleted then it returns true else it returns false.

Now since we have read about the syntax, so let's see an example using this particular syntax:

In the above code, we have created a map named map1 then added values in it using the .set command, then retrieved using the .get command then deleted it from the map. Run the above code in your editor for a better and clear explanation. Noe lets us read about some more common operations which we can perform on a map:

Common Operations Available on a Map

Now let us read about some common operations that we can perform in a map in typescript:

1. map.get(key,val): This is used when we want to insert values in a map.
2. map.get(key): This is used when we want to retrieve the elements from the map in typescript. It returns undefined when the key value does not exist in the map.
3. map.has(key): If the key value is present in the map then it returns true or else it returns false.
4. map.size: By the word size we mean it is used to determine the size of the map.
5. map.delete(key): This syntax is used to delete the entries from the key, is the given key is present and gets deleted then it returns true else it returns false.
6. map.clear(): This syntax is used to clear all the elements from the map.

Iterating Over Map

To iterate over the map we can use the for ... of loop in typescript. Now let's see an example below to understand it more clearly:

Output

In the above code, we have just iterated over the map values and printed them in the console. Run the above code in your editor for a better and clear explanation.

Map methods

Map Methods Example

Output

We have performed the map methods in the following example. Run the above code in your editor for a better and clear explanation.

Iterating Map Data

We can iterate over the map elements by using the for..of loop in typescript. The fore each method takes a function that gets invoked for each key and value pair in the map. Now let's see an example to understand it more properly:

In the above code, we created a map named map1 then inserted three values in it, and using the for of loop iterated over the map and printed them. Run the above code in your editor for a better and clear explanation.