TypeScript Dictionary vs Map

If you’re just starting with TypeScript and JavaScript, you might have heard terms like “dictionary” and “Map” used to describe ways to store key-value pairs. But what’s the difference between a TypeScript Dictionary and a Map? When should you use one over the other?

In this tutorial, I’ll walk you through everything you need to know about dictionaries and maps in TypeScript, especially the difference between TypeScript dictionaries and maps, with plenty of examples.

What is a Dictionary in TypeScript?

In programming, a “dictionary” is a data structure that stores data in key-value pairs. In TypeScript, there isn’t a built-in Dictionary type, but we can easily create one using interfaces or types. Usually, a TypeScript dictionary is just an object whose keys are strings (or sometimes numbers), and whose values can be of any type.

Example: Create a Simple Dictionary

Here is an example of creating a dictionary in TypeScript.

interface Dictionary {
  [key: string]: string;
}

const userRoles: Dictionary = {
  alice: "admin",
  bob: "editor",
  charlie: "viewer"
};

console.log(userRoles["alice"]); // Output: admin

In this example, we define a Dictionary interface that says “for any string key, the value will be a string.” We then create a userRoles object to store each user’s role.

Check out Initialize an Empty Dictionary in TypeScript

What is a Map in TypeScript?

A Map is a built-in JavaScript object introduced in ES6, and it’s fully supported in TypeScript. A Map is also a collection of key-value pairs, but with some important differences compared to plain objects.

Example: Create a Map

Here is an example of creating a map in TypeScript.

const userRolesMap = new Map<string, string>();
userRolesMap.set("alice", "admin");
userRolesMap.set("bob", "editor");
userRolesMap.set("charlie", "viewer");

console.log(userRolesMap.get("alice")); // Output: admin

Here, we create a Map that stores string keys and string values. We use the set method to add entries and the get method to retrieve values.

Check out Convert Typescript Dictionary to String

Key Differences Between TypeScript Dictionary and Map

Let’s break down the main differences between a TypeScript dictionary (object) and a Map:

1. Key Types

• Dictionary: Keys are always strings (or numbers, which are converted to strings).
• Map: Keys can be any type—strings, numbers, objects, even functions.

Example: Using Non-String Keys in a Map

const myMap = new Map<any, string>();
const objKey = { id: 1 };
myMap.set(objKey, "object key");
console.log(myMap.get(objKey)); // Output: object key

You can’t do this with a plain object!

2. Order of Keys

• Dictionary: The order of keys is not guaranteed.
• Map: Keys are ordered by insertion. When you iterate over a Map, you get the entries in the order you added them.

3. Iteration

• Dictionary: You can use for...in to iterate keys, but you have to be careful about inherited properties.
• Map: Provides built-in methods like forEach, keys(), values(), and entries() for safe and easy iteration.

Example: Iterating Over a Map

userRolesMap.forEach((role, user) => {
  console.log(`${user} is a ${role}`);
});

4. Performance

• For most use cases, both are fast. However, Map is optimized for frequent additions and removals of key-value pairs.

5. Built-in Methods

• Dictionary: Basic objects don’t come with methods for managing entries.
• Map: Comes with helpful methods like set, get, has, delete, and clear.

6. Safety

• Dictionary: There’s a risk of key collisions with built-in object properties (like toString).
• Map: No risk of key collisions with built-in properties.

Check out Find Key By Value In TypeScript Dictionary

When Should You Use a TypeScript Dictionary?

Use a dictionary (plain object) in TypeScript when:

• Your keys are always strings (or numbers).
• You want a simple, lightweight data structure.
• You don’t need to worry about key order or advanced features.
• You’re working with JSON data or interacting with APIs.

Example: Counting Word Frequencies

const words = ["apple", "banana", "apple", "orange"];
const wordCount: { [key: string]: number } = {};

for (const word of words) {
  wordCount[word] = (wordCount[word] || 0) + 1;
}

console.log(wordCount); // Output: { apple: 2, banana: 1, orange: 1 }

Read How To Filter A Dictionary In TypeScript?

When Should You Use a Map in TypeScript?

Use a Map in TypeScript when:

• You need keys that aren’t just strings (like objects or functions).
• You care about the order of entries.
• You need to frequently add or remove entries.
• You want built-in iteration and utility methods.

Example: Using Objects as Keys

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

const visits = new Map<object, number>();
visits.set(person1, 5);
visits.set(person2, 3);

console.log(visits.get(person1)); // Output: 5

Check out Convert An Array To A Dictionary In TypeScript

Dictionary vs Map: Summary Table

Here is a summary of the differences between a TypeScript Dictionary and a Map.

Feature	TypeScript Dictionary	TypeScript Map
Key Types	String keys or number keys only.	Keys can be of any type, including objects and functions.
Iteration	Iterating over a dictionary requires extracting keys or values first.	Maps are directly iterable using the for...of loop.
Size	No direct property to get the size of the dictionary.	Has a size property to get the number of elements.
Element Order	Not guaranteed.	Maintains the order of elements as they were added.
Default Key Existence	Dictionaries can have default keys as they are objects.	Maps do not have default keys.
Performance	Generally, faster at storing and retrieving string-keyed data.	Better performance in scenarios involving frequent additions and deletions.
Methods & Properties	Limited to object properties and methods.	Comes with methods like set, delete, has, clear.

Conclusion

In TypeScript, both dictionaries (objects) and Maps let you store key-value pairs, but they serve slightly different purposes. Use dictionaries for simple, string-keyed data, and use Maps when you need more flexibility, order, or advanced features.

In this tutorial, we saw the differences between TypeScript dictionaries and maps.

You may also like the following tutorials:

• Get First Element from a Typescript Dictionary
• Check If Value Exists In Dictionary In TypeScript
• Get Value From A Dictionary In TypeScript