JavaScript Dictionary Implementation

A dictionary is also called a map in JavaScript, and maps/dictionaries are used to store unique elements of key-value pairs. In this article we will discuss on JavaScript Dictionary.

Thanks to ES6 (ECMAScript 6), JavaScript now implements a map that could also be interchangeably called dictionaries.

A Dictionary (Key-Value pair collection) object can be beneficial at times in statically typed programming languages.

While JavaScript doesn’t natively include “Dictionary,” it contains a very flexible type called “Object”. The JavaScript “Object” type is extremely versatile since JavaScript is a dynamically typed language.

Table of Contents

While there is no “Dictionary” type in JavaScript, it is easy to create and use a dictionary object.

There are many dictionary symbols used to create it. Using brackets, creating objects, etc. You can choose any of dictionary style to use it.

Creating Dictionary

1. Creating Dictionary with Object using "new" Keyword

The keyword “new” is used to create an object in JavaScript. And we are declaring the dictionary variable as Object type.

var  dict = new Object();

2. Creating Dictionary with Object using Curly Brackets

var  dict = {};

3. Creating Dictionary by Adding Some Key-Value Pairs

var  dict = {
    “f_name “: “Anmol”,
    “l_name” : “Lohana”,
    22 : “age”;
};

ADDING ITEMS TO DICTIONARY

We can add items to the dictionary by either setting the values using the Object’s Indexer property or just calling it directly using dot as if it were a standard property on the object.

1. Adding or Updating Property by Using Index

dict[“f_name”] = “Anmol”;
dict[“l_name”] = “Lohana”;
dict[22] = “age”;

2. Adding or Updating Property Direct by Name

dict.f_name = “Anmol”;
dict.l_name = “Lohana”;

Deleting an item from dictionary

We can remove a dictionary item using the JavaScript delete keyword, where we will provide the item with dot format or square format. Below we will delete two items; those keys are l_name and 22.

delete dict.l_name;
delete dict[22];

Iterating through Dictionary Items

Generally, a dictionary can have multiple keys where we may need to iterate or loop over them. We can use JavaScript for loops to iterate over keys and return the value with the current key.

For-in loop is used to iterate through the properties of an object. In below given example for in loop will be executed for all the keys of the dictionary and assign their values to the value variable.

for(var key in dict) {
    var value = dict[key];
}

Accessing the Dictionary Items

The Key-Value pairs can be accessed directly on the dictionary Object either through the indexer or instantly as a property of the object (i.e., using dot operator)

var name = dict[“f_name”];  // Using Index
//OR
var name = dict.f_name; //Using Dot Operator

Coding Examples

Example #01: Creating a Simple Dictionary

In this example we will make a dictionary object and assign some key-value pairs then print the values in result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<p id="demo"></p> 

    <script>

        let dict = {
            "f_name" : "Anmol",
            "l_name" : "Lohana",
            "letters" : [5, 6]
        };

        var f_name = dict["f_name"];
        var l_name = dict["l_name"];
        var letters = dict["letters"];

        document.getElementById("demo").innerHTML = 
        f_name + " " + l_name + " " + letters; 

    </script>
    
    </body>
</html>

Output

Example #02: Creating a Nested Dictionary

In this example we will create a dictionary object and assign some key-value pairs and then we will print them in result by calling them with dot notation.

As we discussed in previous example that we can add all datatypes items in a dictionary. Dictionary itself is an object datatype in JavaScript so we have created another dictionary object inside our test_dictionary in the example shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


<p id="demo"></p> 

    <script>
        
        var test_dictionary = {
            "key" : "value",
            "keys" : {
                "Int" : 22,
                "Str" : "Hello",
                "Bool" : true,
                "Arr" : ["a", 1, "b", 2, "c"]
            }
        }

        document.getElementById("demo").innerHTML = 
        test_dictionary.key + " " + 
        test_dictionary.keys.Int + " " + 
        test_dictionary.keys.Str + " " +
        test_dictionary.keys.Bool + " " +
        test_dictionary.keys.Arr;

    </script>
    
    </body>
</html>

Output

Conclusion

In this article, we have discussed JavaScript dictionaries. A brief introduction of the JavaScript dictionary that contains key-value pairs. Implementation of JavaScript dictionary. Different ways of creating a dictionary, adding items to it, remove items from it, iterating and accessing items in a dictionary. And finally, we saw some of its code snippets.

JavaScript Dictionary Implementation – Usage, Creation, Iteration, Deletion [with Coding examples]