How Create and Use Dictionary In JavaScript Tutorial with Examples?

Dictionary is a data type that can be used for different purposes. Dictionaries provide one key and one value matched together. JavaScript programming language does not provide the Dictionary data structure natively. But a dictionary data structure can be implemented with the help of JavaScript Object type. In this tutorial, we will learn how to create a dictionary, add/remove items, get items, iterate over items, etc.

Dictionary or Key/Value Pair or Item

Before starting to learn the dictionary in JavaScript we have to make clear some terms used with the dictionary data type. Dictionary is consist of single or multiple items which are just key and value pair.

  • `Dictionary` may contain single or multiple items.
  • `Item` consists of Key and Value pairs.
  • `Key` is used to select, search and filter an item.
  • `Value` is used to store some data inside an item.

Create Dictionary In JavaScript

As the dictionary is not supported natively we will use the Object type where we will simply create a new object with the dictionary variable name. First, we will create a dictionary just by creating an object whose variable name is dict but this name can be different.

//Create Dictionary with Object
var dict = Object();

Alternatively, we can create a dictionary by using curly brackets which will also create an Object

//Create Dictionary with Object
var dict = {};

Another alternative way is creating a dictionary by setting some items or key/value pairs.

var dict = {

   ismail: "Baydan",

   ahmet: "Ali",

   elif: 1,

   "ilknur": "Baydan",

   10: "Val",

};

We can see from the example that the key and values can get a different type of data like string, integer, etc.

Add/Populate Item To Dictionary

We can add or populate a dictionary very easily by using the key and value like below.

dict["ismail"] = "baydan";

dict[30]= "This ";

We can also create an item or key/value pair by using dot notation like below. We will add a new key FirstName to the dictionary named dict with a value John.

dict.FirstName="John";

Remove/Delete Item To Dictionary

We can also remove a dictionary item by using JavaScript delete keyword where we will provide the item with dot format or square format. Below we will delete two items those keys are ismail and 10.

//Delete Item with Key ismail
delete dict.ismail;
//Delete Item with Key 10
delete dict[10];

Iterate/Loop Over Dictionary Items

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

//Iterate over dict and get key for each step
for(var k in dict){
   
   //Return the value for the current key
   var v = dict[k];

}

Get/Access Item In Dictionary

We can get or access a specific item by using the key. We will just provide the key with a square parenthesis or dot usage below.

//Access using squre paranthesis
var val1  = dict["Name"];
//Access using dot
var val2 = dict.Surname;

Change/Update Value In Dictionary

We can also change an existing item value by using its key. This will not delete the item it will just update. In this following example, we will change the Name key value to Elif and 10 key value to ten.

//Change or Update Value 
dict.Name = "Elif";


dict[10] = "ten";

Check If Key Exist

We can check if an item or key exists by using a simple if statement. We will just provide the key to the if statement. If the item or key exists the if block will be executed.

if(dict.name){
   //The dict.name exist
   console.log(dict.name);
}


if(dict[10]){
   //The dict 10 exist
   console.log(dict[10]);

}

Leave a Comment