Dictionary vs Map vs Object

Frontend projects often use lodash, which includes a type called Dictionary. JavaScript has built-in objects Map and Object. What are the connections and differences between these three, and how should we choose between them? Read on!

Dictionary in lodash

Concept Overview

A Dictionary is a data structure that stores data in key-value pairs. JavaScript’s Object, Map, and lodash’s Dictionary are all implementations of the dictionary type.

What is lodash? It’s a utility function library. Check the official website for details.

lodash source code:

interface Dictionary<T> {
        [index: string]: T;
    }

From this we can understand:

1. lodash’s Dictionary is an interface type with string keys and generic values, meaning all values have consistent types under this definition.
2. lodash’s Dictionary is an instance of Object, so it also has Object methods.
3. If a project doesn’t use lodash, you can implement a simple dictionary type yourself as shown above.

Map

Map type was introduced in ES6 (ES2015)

Look at the TypeScript definition source code:

interface Map<K, V> {
    clear(): void;
    delete(key: K): boolean;
    forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void;
    get(key: K): V | undefined;
    has(key: K): boolean;
    set(key: K, value: V): this;
    readonly size: number;
}

Map Object Initialization

const stuMap = new Map([[1, 'stu1'], [2, 'stu2']])

From this we know that Map not only stores structured data but also provides many property methods.

Object

Object is the basic object in JavaScript, and basic objects are the foundation for defining and using other objects. Map is an instance of Object, and of course, lodash’s Dictionary is also an instance of Object.

Look at the TypeScript definition source code:

interface Object {
    /** The initial value of Object.prototype.constructor is the standard built-in Object constructor. */
    constructor: Function;

    /** Returns a string representation of an object. */
    toString(): string;

    /** Returns a date converted to a string using the current locale. */
    toLocaleString(): string;

    /** Returns the primitive value of the specified object. */
    valueOf(): Object;

    /**
      * Determines whether an object has a property with the specified name.
      * @param v A property name.
      */
    hasOwnProperty(v: PropertyKey): boolean;

    /**
      * Determines whether an object exists in another object's prototype chain.
      * @param v Another object whose prototype chain is to be checked.
      */
    isPrototypeOf(v: Object): boolean;

    /**
      * Determines whether a specified property is enumerable.
      * @param v A property name.
      */
    propertyIsEnumerable(v: PropertyKey): boolean;
}

Note: In TypeScript projects, when we declare an object type as {}, it’s equivalent to a hashMap type:

const o:{} = {}
// should be equivalent to

const o:{[key:string]:any} = {}

o.x = 5; //fails
o['x'] = 5; //succeeds

Connections and Differences Between the Three

1. Object is similar to lodash’s Dictionary, but Dictionary only has consistent value types, while Object’s value types can be any type
2. Map is ordered and iterable, while Object is not
3. Map’s keys can be any type, while Object’s keys can only be number, string, or symbol.

How to Choose

Now that we understand the differences, let’s discuss common usage scenarios.

1. Frontend-backend requests and responses are generally in application/json format. If we need to define return value types, Object and Dictionary are better choices because JSON directly supports Object but not Map yet. If the return data is always in the format {’’:’}, then you can directly define it as Dictionary<string>. If the value types are not uniform, you can use Object or {}, but defining specific types is even better.
2. If the data needs to consider order and iteration, then use Map.

JavaScript Heap and Stack

The types mentioned above all belong to the Object type, and object types are stored in heap memory, while stack memory only stores address references. So be careful when copying and modifying object values. Understanding this helps avoid pitfalls when using these types.

Final Thoughts

Now that we understand the relationships between these three, we can use them appropriately. One key point to highlight: when facing a scenario with simple data, Map, Object, and Dictionary can all solve the problem, but for performance, readability, etc., we still need to make reasonable choices to avoid creating pitfalls.

Reference Documentation

• Map MDN
• Map vs Object in JavaScript
• Differences and Usage Scenarios Between Object and Map
• JavaScript Heap and Stack