TypeScript map with examples a complete guide

In this article, we will be going to see a new data structure that was introduced after the ES6 version update of JavaScript. That is maps and what the maps do is store values as key-value pairs as we do with Objects. But maps are different from TypeScript Objects. Stick with this article to the end, and you will learn everything about maps, And I hope this article will help you understand TypeScript maps.

What is a TypeScript map?

In ES5 TypeScript, we had just one type of collection, which was represented as an Array type. So what are maps, then? A map is nothing but just a collection of key-value pairs the same as objects.

Let’s now see what a map looks like in code.

We use the Map() constructor to create a new map in TypeScript.

// index.ts
const infoMap = new Map();
infoMap.set('name', 'Amol shelke');
console.log(infoMap); // the output will be like this
// Map (1) {"name" => "Amol shelke"} 
Code language: TypeScript (typescript)

As you can see in the above code example, I have created an infoMap map with the Map() constructor. And as I said, we can use built-in methods that the constructor has. I used the set() method to set a key-value pair in the infoMap map. Let’s now see how we can set data as a key-value pair and get data from the map.

Setting and getting values from a map

You’ll now see what a map is and how we can create it using the new Map constructor.

Setting values to map

Now let’s see how we can set and get values from a map. In the above example, I have to add an element on the map as key-value pair. We can add elements to the map using the set() method. Let’s see the example.

Example

What set() does is it adds an element to the map as a key-value pair which the set method gets as an argument.

const infoMap = new Map();
infoMap.set('firstName', 'Amol');
infoMap.set('lastName', 'Shelke');
console.log(infoMap); // the output will be 
// Map (2) {"firstName" => "Amol", "lastName" => "Shelke"} 
Code language: TypeScript (typescript)

And if we tried to add an element that has the same key specified in the map, then the first element with that key will be going to updated with the new one. As shown in the example below.

const infoMap = new Map();
infoMap.set('name': 'Amol');
infoMap.set('age': 18);
console.log(infoMap) // the output will be 
// Map (2) {"firstName" => "Amol","age" => 18} 
infoMap.set('age': 19); 
console.log(infoMap) // the age will be updated
// Map (2) {"firstName" => "Amol","age" => 19}
Code language: TypeScript (typescript)

Getting values from a map

As we just now see how we can set values to map using the set(). Let’s now see how we can get the values from a map. We use the get() to get the values from a map consider the following example.

Example

To get a value from a map, we use the get(). And what the get() does is it takes a key as an argument. And returns the element which is associated with the key. As shown in the example below.

const infoMap = new Map();
infoMap.set('name': 'Amol');
infoMap.set('age': 18);

const age = infoMap.get('age'); // it will get the value of age key from the map
console.log(age); // the output will be 18
Code language: TypeScript (typescript)

And if we pass a key argument and there is no element which is associated with that key, then we will get an undefined value return.

infoMap.set('city', 'Nagpur');
const country = inforMap.get('country'); // there is no country key present in our map
console.log(country); // so it will log undefined on to the console
Code language: TypeScript (typescript)

So this is how we can set and get values from a map in TypeScript. I showed you the examples also.

Checking if a certain element is present in a map

Now after seeing how we can set and get values from a map. Let’s now see how we can check if a certain element is present in a map. And we can do that by using the has() method.

So we use the has() method to check if a certain element present in a map. The has() method takes a key as an argument and checks if the element associated with that key is present in the map. And if the element is present in the map, it will return true, or it will return false.

Example

The has() in practice.

const studentMap = new Map();
studentMap.set('student1', 'Amol');
studentMap.set('student2', 'Naruto');
console.log(studentMap); // it will log an Map containg both student1 and student2 to the console
// check if the student1 is present in the studentMap
conosle.log(studentMap.has('student1')); // it will return true
Code language: TypeScript (typescript)

In the above example, I checked if there is any element which is associated with the student1 key inside the studentMap and there is an element associated with the key so that’s why I get the output of true onto the console.

And if there is no element associated with the key which we passed to the has() inside the studentMap map it would have returned false as a result. As shown in the example below.

console.log(studentMap.has('student3')) // it will return false
Code language: TypeScript (typescript)

As you can see, there is no student3 key inside the studentMap map. And we are using the has() to check if there is any element that is associated with the student3 key. So, as a result of this check, we will get a false value.

How to find the size of the map

The size property is available on every map in TypeScript is used to find the size of the map. it returns the number of elements present inside the map.

Example

const anime = new Map();
anime.set('Naruto', 800);
anime.set('AOT', 79);
console.log(anime); it will log the map containing the two elements.
console.log(anime.size); it will log 2 onto the console
Code language: TypeScript (typescript)

It’s a small example, But if you are creating a project in which you will be creating maps with multiple elements inside that. In that case, you will need this size property to find the size of the map. It’s easy to use a method that’s why I will not be going too deep dive inside that.

Deleting elements and emptying maps

Up until now, we have seen how we can set and get values from the map, check if a certain element is present and how we can find the size of the map. Now let’s see how we can delete a certain element and remove all the elements at once. Let’s start with the first one, which is deleting a specific element.

Deleting elements

Deleting elements from a map is a very used operation that we do when working with maps. How we can delete elements from a map, then? There is a delete() method on every map which we can use to delete a specific element from a map. Let’s see it in practice.

Example

Let’s suppose we have a map that has different types of elements, and we want to delete a specific element from that. What we can do is we can use the delete() method and what that method does is it takes a key as an argument. And return true if the element associated with the key exists and is removed from that map. Let’s see an example.

const animes = new Map();
animes.set('Naruto', 800);
animes.set('AOT', 79);
console.log(animes); // the output will be a map containg the two animes
Code language: TypeScript (typescript)

Now I want to delete the AOT anime from the animes map. So I can do that now with the delete() method. As shown in the example below.

animes.delete('AOT'); // it will return true 
console.log(animes); // {'Naruto' => 800}
Code language: TypeScript (typescript)

As you can see we have deleted the AOT anime from the animes map using the delete() method.

Emptying maps

In any case, if you ever need to remove all the elements from the map. You can do that by using the clear() the method which does not take any argument. You can just call the clear() method on your map from which you want to remove all elements.

Example

After watching every anime, I want to clear my animes map, and I don’t want them to delete one by one. I want to delete all of them at once. So yes, I will use the clear() method on the animes map.

const animes = new Map();
animes.set('Naruto', 800);
animes.set('AOT', 79);
animes.set('Haikyuu', 80);
console.log(animes); // it will log the animes map containing all the animes
Code language: TypeScript (typescript)

Now let’s delete all animes which we finished after watching them.

animes.clear(); // it will remove all the elements from the animes map
console.log(animes); // the output will be a empty map {}Code language: JavaScript (javascript)

As you can see, I was able to clear the animes map by using the clear() method.

Conclusion

That’s it for this article post. In this article, we talked about TypeScript maps with examples. We learned about what is TypeScript maps, how we can set and get values from maps, a certain element present in the maps, finding the map size, deleting a single element, and deleting all the elements of the maps. I have shown it with examples for not making the article only in theory and explanation. I hope you understand what the maps are in TypeScript.

Happy Coding keeps learning and creating!