TypeScript Dictionary vs Map – Complete Comparision

Are you looking to know what are the differences between a Typescript dictionary and a map? Check out this complete tutorial I have explained here: “TypeScript Dictionary vs Map“. When we should use a dictionary in Typescript, and when we should use Map.

What is a TypeScript Dictionary?

A TypeScript Dictionary is an object or a record that facilitates the storage of elements in key-value pairs, with string keys and values of any type. It is a collection where you can store data in a format that allows quick lookup of values based on a key.

What is a TypeScript Map?

Conversely, a TypeScript Map is a collection introduced in ES6 (ECMAScript 2015) that holds key-value pairs where both the keys and values can be of any type. Maps remember the original insertion order of the keys, a feature not available in plain objects.

Dictionary vs. Map: The Differences

To understand the fundamental differences between a TypeScript Dictionary and a Map, let’s review them side by side in a table format:

FeatureTypeScript DictionaryTypeScript Map
Key TypesString keys or number keys only.Keys can be of any type, including objects and functions.
IterationIterating over a dictionary requires extracting keys or values first.Maps are directly iterable using the for...of loop.
SizeNo direct property to get the size of the dictionary.Has a size property to get the number of elements.
Element OrderNot guaranteed.Maintains the order of elements as they were added.
Default Key ExistenceDictionaries can have default keys as they are objects.Maps do not have default keys.
PerformanceGenerally, faster at storing and retrieving string-keyed data.Better performance in scenarios involving frequent additions and deletions.
Methods & PropertiesLimited to object properties and methods.Comes with methods like set, delete, has, clear.

Now that we’ve established the differences, let’s delve into each data structure with illustrative examples.

See also  How to Convert Date to UTC in Typescript?

TypeScript Dictionary Example

In TypeScript, you can use an interface to define the structure of a dictionary. Here’s an example:

interface IDictionary {
  [key: string]: any;
}

let userRoles: IDictionary = {
  "john.doe": "Admin",
  "jane.doe": "User",
  "mike.smith": "Moderator"
};

console.log(userRoles["john.doe"]);

In this example, userRoles is a dictionary where the keys are usernames, and the values are roles.

TypeScript Map Example

Creating and using a Map in TypeScript is slightly different. Here is a complete code.

let userRoles = new Map<string, string>();

userRoles.set("john.doe", "Admin");
userRoles.set("jane.doe", "User");
userRoles.set("mike.smith", "Moderator");

console.log(userRoles.get("john.doe"));

With Maps, we use the set method to add items, and get to retrieve them. We can also maintain the order of insertion, and we can use objects as keys if needed.

When to Use Dictionary vs Map

  • Use a Dictionary when dealing with a collection of items with string keys, and you need high-performance lookups.
  • Opt for a Map when you need keys of any type and want to maintain the order of elements.
typescript dictionary vs map

Conclusion

Understanding the differences between a TypeScript Dictionary and a Map is fundamental for developers trying for optimal code performance and clarity. While both structures offer the utility of storing key-value pairs, their differences in key types, iteration capabilities, size property, element order, and methods significantly influence their use cases. In TypeScript, choosing between a Dictionary and a Map hinges on your specific needs regarding key diversity, order preservation, and operation performance.

You may also like:

>