Everything You Should Know about Javascript Dictionaries

Everything You Should Know about Javascript Dictionaries

Wait! Does Javascript have a Dictionary type now? Not exactly. At least, not yet.

But with its ever-so-flexible Object and ES6 Map types, creating a dictionary-like object for storing data as key-value pairs is only a matter of minutes.

This statement may seem a little strange to you if you’re coming from a background in a statically typed language. But with its dynamically typed nature, achieving this with Javascript is not a problem at all. So, in today’s article, let’s talk about how you can successfully create dictionaries in Javascript and access stored data using alternative data structures.

Get 10 tips for the self-taught developer

And join thousands of other developers from companies like Google, Meta, Siemens, freelancers and entrepreneurs that are receiving weekly tips and articles.

    Create Dictionaries with Javascript Objects

    Javascript Object type offers us enough flexibility to store data as key-value pairs as a standard dictionary does. But its versatility doesn’t end there. Object type also supports accessing stored data using keys, iterating through keys and values, and even using different data types as keys.

    And it all starts with creating a new dictionary using Object. Here’s how we can do that.

    let dict = {
        id: 123,
        name: "Anj",
        age: 28,
        registered: true

    As an alternative way to create a dictionary, you can first initialize an Object instance and populate it with key-value pairs in the following manner.

    //Create a new Object
    let dict = new Object()
    //Populate data
    dict["id"] = 123
    dict["name"] = "Anj"
    dict["age"] = 28
    dict["registered"] = true

    We can take another step ahead and create an object with a null prototype. It removes all the methods inherited from Object.prototype. It suits us the best because these object methods are unnecessary for a dictionary. This includes methods such as hasProperty(), hasOwnProperty(), toString(), valueOf() etc.

    Here is how you can modify the Object creation step to get an object with a null prototype.

    let dict = Object.create(null)

    Javascript allows us to assign different data types—including string, integer, and float—for keys and values, even in the same dictionary.

    let dict = {
        "color": "red",
        1: [12, 14, 90],
        1.2: 123,

    You can even store a Javascript method as a value in an Object-based dictionary.

    const method = () => console.log("Hello");
    let dict = {
        "method": method,

    However, when storing keys of types other than string, Object implicitly converts them to string type before storing. For example, this is how Javascript has converted the keys of the above dictionary during its creation:

      '1': [ 12, 14, 90 ],
      color: 'red',
      '1.2': 123,

    Access Data Using Keys

    Being able to retrieve a particular key-value pair using the key is one of the most valuable features of the dictionary data structure. With the Javascript Object type, doing this is as easy as the following example shows.

    let dict = {
        "color": "red",
        1: [12, 14, 90],
        1.2: 123
    dict["color"] //red
    dict[1] //[12, 14, 90]
    dict[1.2] //123
    //Use key as a property 
    dict.color //red

    As this example shows, you can use any key as an index to retrieve the value associated with it. For keys of type string, you can access the value by considering the key as a property of the object.

    Iterate Through Key-Value Pairs

    Javascript Object type provides several methods to iterate through keys, values, or key-value pairs depending on the use case.

    First, let’s see how to iterate through the keys in the dictionary using the Object.keys method.

    for (const key of Object.keys(dict)) {
        console.log(key + ":" + dict[key])

    Iterating through values of the dictionary follows the same pattern with the help of Object.values method.

    for (const value of Object.values(dict)) {

    We can also iterate over pairs of keys and values in the same loop using the Object.entries method.

    for (const [key, value] of Object.entries(dict)) {
        console.log(key + ":" + value)

    Remove a Key-Value Pair from the Dictionary

    We can use Javascript’s delete operator to remove a key-value pair from an Object-based dictionary. For example:

    let dict = {
        id: 123,
        name: "Anj",
        age: 28,
        registered: true
    delete dict["registered"] 
    dict //{ id: 123, name: 'Anj', age: 28 }

    One downside to using the delete operator to remove a key-value pair is that it reduces the performance of your code. If you’re more concerned about the performance than completely removing the property from the dictionary, you can set its value to null or undefined to flag a “removed” property.

    dict["registered"] = undefined
    dict //{ id: 123, name: 'Anj', age: 28, registered: undefined }

    Even though this method doesn’t entirely remove the property, it completes execution much faster than the delete operator.

    With that, we have discussed the basics of creating dictionaries in Javascript with the help of its Object type. In the next section, let’s see how we can get a similar result using ES6 Maps.

    Create Dictionaries with Javascript Maps

    Javascript Maps, introduced in ES6, are another excellent alternative to use for creating dictionaries. In fact, Maps have an added advantage over regular Objects when it comes to functioning like dictionaries. We have listed some key benefits of using Maps over Objects for this use case below.

    • Keys in maps can be of any type. It includes objects in addition to the primitive and string types Objects accept as keys. And Maps preserve the initial type of the key without implicitly converting them to strings as Objects does.
    • A Map orders its key-value pairs in the order we inserted them. But the ordering in Objects is not as reliable and straightforward as Maps.
    • Maps have a “size” property that directly retrieves the number of stored key-value pairs. With Objects, we have to manually calculate the size with the help of Object.keys or a similar method.

    So, how can we create dictionaries with Maps? Let’s find out.

    //Create Map instance
    let dict = new Map()
    //Add key-value pairs
    dict.set("id", 123)
    dict.set("registered", true)
    let person = {name: "Anj"}
    //Add keys of different types
    dict.set(1, [1, 2, 3, 5])
    dict.set(person, "available")

    This returns us a map with its key types preserved.

    Map(4) {
      'id' => 123,
      'registered' => true,
      1 => [ 1, 2, 3, 5 ],
      { name: 'Anj' } => 'available'

    Access Data Using Keys

    ES6 Maps provides a dedicated “get” method to retrieve data based on keys. Here’s how we can use it to access stored key-value pairs.

    dict.get("id") //123
    dict.get("registered") //true
    dict.get(1) //[1, 2, 3, 5]
    dict.get(person) //available

    Iterate Through Key-Value Pairs

    Maps type in Javascript is directly iterable. So, we don’t have to use an additional method like Object.keys to retrieve the set of key-value pairs stored in a map. Instead, we can use a for…of loop to iterate over data like the following code snippet shows.

    for (const [key, value] of dict) {
        console.log(key + ": " + value)

    Maps also provide separate entries(), keys(), and values() functions to iterate over keys and values in different ways depending on the use case.

    for (const [key, value] of dict.entries()) {
        console.log(key + ": " + value)
    for (const key of dict.keys()) {
    for (const value of dict.values()) {

    Remove a Key-Value Pair from the Dictionary

    Again, Maps have a dedicated method for deleting a stored key-value pair. It returns true if the delete operation completes and false otherwise.

    dict.delete(person) //true
    dict //Map(3) { 'id' => 123, 'registered' => true, 1 => [ 1, 2, 3, 5 ] }

    Additional Dictionary Operations with Maps

    In addition to what we discussed so far, Maps supports several more methods that allow us to interact with dictionaries. For example, we can use the following has method to check whether the dictionary contains a specific key.

    dict.has("dog") //false
    dict.has("id") //true

    Get the size of the dictionary using size:



    Even though Javascript doesn’t have an in-built Dictionary data type, its Object and Map types can behave similarly to dictionaries in languages like Python. In today’s tutorial, we talked about using these alternative types to store and access key-value pairs in Javascript as a standard dictionary does.

    So, next time, when you’re looking for something that works like a dictionary to solve a problem, you can choose one of the two options we provided here depending on your requirements.

    If you liked what you saw, please support my work!

    Anjalee Sudasinghe - Author @ Live Code Stream

    Anjalee Sudasinghe

    I’m a software engineering student who loves web development. I also have a habit of automating everyday stuff with code. I’ve discovered I love writing about programming as much as actual programming.

    I’m extremely lucky to join the Live Code Stream community as a writer and share my love for programming with others one article at a time.