TypeScript Map

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

This tutorial will teach the Map data structure in TypeScript with Examples.

TypeScript Map allows you to store key-value pairs, similar to the maps in other programming languages e.g. Java HashMap.

TypeScript Map Basic Usage

// Create a new Map
const myMap = new Map();

// Set values
myMap.set("key1", "value1");
myMap.set("key2", "value2");

// Get values
console.log(myMap.get("key1")); // Output: "value1"
console.log(myMap.get("key2")); // Output: "value2"

// Check if a key exists
console.log(myMap.has("key1")); // Output: true

// Get the number of key-value pairs
console.log(myMap.size); // Output: 2

// Delete a key-value pair
myMap.delete("key2");

// Check if a key exists (after deletion)
console.log(myMap.has("key2")); // Output: false

// Clear the Map
myMap.clear();

// Check the size of the Map (after clearing)
console.log(myMap.size); // Output: 0

Output:

"value1" 
"value2" 
true 
2 
false 
0 

• myMap.set(key, value) – adds a new entry in the Map.
• myMap.get(key) – retrieves the value for a given key from the Map. 
• myMap.has(key) – checks if a key is present in the Map. Returns true or false. 
• myMap.size – returns the count of entries in the Map. 
• myMap.delete(key) – deletes a key-value pair using its key. If the key is found and deleted, it returns true, else returns false. 
• myMap.clear() – deletes all entries from the Map.

Iterating over Map

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");

// Iterate over keys
for (const key of myMap.keys()) {
  console.log(key);
}
// Output:
// "key1"
// "key2"
// "key3"

// Iterate over values
for (const value of myMap.values()) {
  console.log(value);
}
// Output:
// "value1"
// "value2"
// "value3"

// Iterate over entries (key-value pairs)
for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}
// Output:
// "key1" "value1"
// "key2" "value2"
// "key3" "value3"

Iterating over keys:

for (const key of myMap.keys()) {
  console.log(key);
}

This loop iterates over the map's keys using the keys() method. The loop body logs each key to the console. In this case, it will output:

"key1"
"key2"
"key3"

Iterating over values:

for (const value of myMap.values()) {
  console.log(value);
}

This loop iterates over the values of the map using the values() method. The loop body logs each value to the console. The output will be:

"value1"
"value2"
"value"

Iterating over entries (key-value pairs):

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}

This loop iterates over the entries (key-value pairs) of the map using the entries() method. The loop body logs each key-value pair to the console. The output will be:

"key1" "value1"
"key2" "value2"
"key3" "value"

Using Objects as Keys

const myMap = new Map();

const key1 = { id: 1 };
const key2 = { id: 2 };

myMap.set(key1, "value1");
myMap.set(key2, "value2");

console.log(myMap.get(key1)); // Output: "value1"
console.log(myMap.get(key2)); // Output: "value2"

In this above example, objects are used as keys. The Map uses strict equality (===) to compare keys, so two objects with the same properties/values are considered different keys. This allows you to use objects as keys and retrieve their corresponding values from the Map.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF