Understanding JavaScript Maps in TypeScript

If you've been working with JavaScript and TypeScript, you’ve probably used Arrays and Objects (or Dictionaries) to store data. But have you tried using Map? Maps provide some great benefits that can make your code cleaner, faster, and more flexible.

Let’s dive into why you might want to use a Map, how it differs from Arrays and Objects, and how to use it effectively in TypeScript.

Why Use a Map?

Maps are a special data structure that allows you to store key-value pairs, just like an object. However, they come with some advantages:

• Key Flexibility: Unlike objects, where keys must be strings or symbols, Maps allow any type as a key.
• Ordered Entries: Maps maintain the order of insertion, unlike objects which don’t guarantee ordering.
• Performance Benefits: When dealing with frequent additions and deletions, Maps perform better than plain objects.
• Built-in Methods: Maps provide a clean and easy-to-use API for adding, deleting, and iterating over key-value pairs.

How is a Map Different from an Array?

• Arrays store values as an indexed list, whereas Maps store key-value pairs.
• Arrays are ideal when you need to loop through elements sequentially, while Maps shine when you need to quickly retrieve values by a unique key.

How is a Map Different from an Object (Dictionary)?

Feature	Object	Map
Key Type	Strings, Symbols	Any (objects, numbers, functions, etc.)
Iteration Order	Not guaranteed	Maintains insertion order
Performance	Slower for frequent additions/removals	Faster for dynamic data
Size Property	Object.keys(obj).length (manual count)	map.size (built-in)
Built-in Methods	None (need Object methods)	Many (set(), get(), has(), etc.)

Using a Map in TypeScript

Here’s a simple TypeScript example demonstrating how to create and work with a Map:

const myMap = new Map<string, string>();
const key = "value";

// Add 10 key-value pairs to the Map
for (let i = 0; i < 10; i++) {
  myMap.set(`${key}${i}`, "emi" + i);
}

// Retrieve a specific value
console.log(myMap.get(`${key}3`)); // Output: emi3

// Log the entire map
console.log(myMap);

// Check if a key exists
console.log(myMap.has(`${key}3`)); // Output: true

// Iterate using forEach
myMap.forEach((item) => console.log(item));

// Iterate values using for...of
for (let value of myMap.values()) {
  console.log(value);
}

// Iterate keys using for...of
for (let keys of myMap.keys()) {
  console.log(key);
}

Breaking Down the Code

1. Creating a Map: new Map<string, string>() defines a Map where both keys and values are strings.
2. Adding Key-Value Pairs: We use .set() to dynamically generate keys (value0, value1, etc.) and assign corresponding values (emi0, emi1, etc.).
3. Retrieving Values: .get() fetches values by key.
4. Checking for Existence: .has() checks if a key exists in the Map.
5. Iterating Over Entries: We use .forEach(), .values(), and .keys() to loop through the Map’s data.

When Should You Use a Map?

• When you need fast key-value lookups.
• When you require non-string keys (e.g., numbers, objects, functions).
• When maintaining insertion order matters.
• When working with large dynamic datasets that require frequent modifications.

If you’ve been using objects for key-value storage, consider switching to Maps where it makes sense. They provide a more predictable and performant way to manage structured data in TypeScript!

Emi Roberti - Happy coding