JavaScript Dictionary: A Practical Guide to Mappings

Learn how JavaScript dictionaries work from plain objects to Maps, with practical patterns for fast key-based lookups, iteration, and nested mappings.

JavaScripting Team

March 23, 2026·5 min read

JavaScript Tutorials Learn JavaScript Objects Frontend

Dictionary in JavaScript - JavaScripting

JavaScript dictionary

JavaScript dictionary is a type of object that maps string keys to values, enabling fast key-based lookup and flexible data modeling. It is commonly implemented with plain objects or Map and is a foundational concept for data structures in JavaScript.

What is a JavaScript dictionary?

A JavaScript dictionary is a data structure used to map keys to values. In practice, the dictionary is commonly implemented as a plain object or as a Map. A dictionary provides fast lookup by key, making it ideal for configuration data, lookup tables, or any scenario where you need to retrieve a value based on a known identifier. In JavaScript, a dictionary is typically based on strings as keys, but Map supports any type as a key. The distinction matters for performance and semantics: plain objects are lightweight and familiar, while Map offers consistent iteration order and more flexible key types. Understanding these differences helps aspiring developers design cleaner and more maintainable code when modeling real world data.

Core concepts you should know

At a high level, a dictionary is about two things: keys and values. A key is the identifier you use to access its corresponding value. A value is the data linked to that key. JavaScript dictionaries rely on either plain objects or Map instances. Plain objects use property names as keys and typically store string keys, while Map stores key–value pairs with additional features like guaranteed insertion order and a rich API. When you work with dictionaries, you should understand iteration, key existence checks, and how to safely access nested data without throwing errors. Finally, consider whether you need prototype-free dictionaries to avoid inherited keys.

Using plain objects as dictionaries

Plain objects are the most common way to implement a dictionary in JavaScript. Example:

const dict = { apple: 'fruit', carrot: 'vegetable', bread: 'carb' };
console.log(dict.apple); // 'fruit'
console.log(dict['carrot']); // 'vegetable'

Access can be done with dot notation for static keys or bracket notation for dynamic keys. If you expect keys that could collide with prototype properties, you can create a dictionary with no prototype using Object.create(null).

Map vs Object: Choosing the right tool

If your dictionary needs extend beyond basic string keys, Map is the preferred choice. Maps allow keys of any type, including objects, and they guarantee insertion order during iteration. They also provide a robust API with methods like set, get, has, and delete. Objects are lightweight and fast for simple, static key sets, and they benefit from familiar syntax. The choice often boils down to whether you require non string keys, predictable iteration order, or frequent dynamic updates. In modern codebases, many developers use Maps for complex dictionaries and plain objects for configuration data that remains stable.

Practical patterns: building a dictionary from data

Transforming data into a dictionary is a common task. Consider an array of user records that you want to access quickly by id:

const users = [
  { id: 'u1', name: 'Alice' },
  { id: 'u2', name: 'Bob' },
  { id: 'u3', name: 'Carol' }
];
const userDict = Object.fromEntries(users.map(u => [u.id, u]));
console.log(userDict.u2.name); // 'Bob'

You can also build a dictionary using Map when you prefer a Map API:

const userMap = new Map(users.map(u => [u.id, u]));
console.log(userMap.get('u3').name); // 'Carol'

Handling missing keys and defaults

Dictionaries frequently encounter missing keys. For plain objects, use the in operator or hasOwnProperty for safe checks, and provide defaults with the nullish coalescing operator. Example:

const settings = { theme: 'dark' };
const theme = settings.theme ?? 'light'; // 'dark'
const language = settings.language ?? 'en'; // 'en'

For Map, use get and the nullish coalescing operator as well:

const map = new Map([['a', 1]]);
const val = map.get('b') ?? 0; // 0

Nested dictionaries and complex lookups

Dictionaries can nest data to represent hierarchical structures. Access paths safely with optional chaining to avoid exceptions when a path is missing:

const catalog = {
  electronics: {
    tv: { price: 999, inStock: true },
    phone: { price: 699, inStock: false }
  }
};
const tvPrice = catalog.electronics?.tv?.price ?? 0; // 999

Nested dictionaries support flexible data modeling for features like configurations, translations, and feature flags.

Common pitfalls and performance tips

Be mindful that plain objects coerce non string keys to strings, which can surprise you if you expect true object identity. If you need truly generic keys, Map is the safer choice. Avoid polluting the global prototype; consider using Object.create(null) to eliminate inherited keys. When iterating over keys, prefer Object.keys for own properties or map over entries in Map to avoid surprises from inherited properties. For large data, consider lazy loading or memoization to keep access fast without bloating memory usage.

Real world use cases and best practices

Dictionaries are everywhere in JavaScript projects. Use them for configuration data, translation tables, feature flags, and caching lookups where speed matters. When working with i18n, a dictionary maps locale strings to message templates, enabling fast retrieval and easy extension. For performance sensitive code, consider keeping dictionaries flat and avoiding unnecessary nesting. Finally, document the structure of your dictionary and its expected keys so teammates can update it safely without breaking lookups. JavaScripting practical guidance emphasizes readable, maintainable dictionary patterns as a cornerstone of robust JavaScript applications.

Questions & Answers

What is the difference between a JavaScript dictionary and a Map?

A JavaScript dictionary usually refers to an object used as a key value store. A Map is a dedicated collection with a richer API, supports keys of any type, guarantees insertion order, and provides convenient methods like set, get, has, and delete.

Can I use numbers as dictionary keys in JavaScript?

When using plain objects, numeric keys are coerced to strings. Map allows keys of any type, including objects and numbers, without coercion.

How do I iterate over dictionary keys in JavaScript?

For plain objects, use Object.keys to get own keys and loop over them. For Maps, use map.keys() or for..of with map.entries().

When should I prefer a Map over a plain object for a dictionary?

Choose Map when you need non string keys, predictable insertion order, or many updates. Use plain objects for simple, static dictionaries or configuration data.

Are dictionaries case sensitive in JavaScript?

Yes. Dictionary keys are case sensitive in JavaScript. 'Key' and 'key' refer to different entries.