How to Use JavaScript Dictionary Like a Pro
Tags: javascript, programming, tutorial, beginners
Published: 2023-07-01 04:27:51

If you are looking for a solution to store your key-value pairs like settings, and lookup data then a JavaScript dictionary is the right choice for you! 

**The dictionary is a data structure that stores data in key-value pairs. It is used to store and retrieve data in an efficient way.** **JavaScript dictionary, allows you to store and retrieve data using key-value pairs.** In contrast to arrays, which store data in a linear order, dictionaries in JavaScript allow you to access data using a unique key rather than an index. This makes dictionaries ideal for storing data that must be accessible fast and readily, such as a user database or a product list.

In this blog post, we will explore the following:

*   Create a dictionary in 3 different ways
*   Add key value pair to the dictionary
*   Update value for a key
*   Accessing items from the dictionary
*   Iterating over a dictionary with 3 different approaches
*   Get all dictionary keys
*   Get all values from a dictionary
*   Get the length of dictionary keys
*   Check whether a key exists in the dictionary
*   Delete an item from the dictionary

Let’s dive deep.

![JavaScript Dictionary - Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbeg97f7hamzr8yfj66e.png)
Creating a Dictionary in JavaScript
-----------------------------------

Unlike other strongly typed programming languages like C#, and Java, JavaScript does not have any native data type of Dictionary. However, we can create custom Dictionary kinds of JavaScript objects. The dictionary allows you to store data in key-value format.

There are multiple ways to create a dictionary in JavaScript. In this blog post, we will see 3 different approaches:

### 1\. Using the object literal notation

Using an object literal is the most common and simple way to create a dictionary. You can create an empty dictionary by using { } or you can add key-value pairs to it by using the object literal syntax. 

Here is a JavaScript dictionary example:

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}
console.log(languages)
// Output: { EN: 'English', ES: 'Spanish', TA: 'Tamil' }

```


![JavaScript Dictionary](https://i0.wp.com/www.rajamsr.com/wp-content/uploads/2023/02/JavaScript-Dictionary-1.webp?w=1011&ssl=1)


### 2\. Using the Map() object

The Map() is one of the [Non-Primitive Data Types in JavaScript](https://www.rajamsr.com/javascript-non-primitive-data-types/). Using the Map() object you can create a dictionary that can hold any type of value. You can create an empty map by using the new Map(). You can add key-value pairs to the map by using the set() method. 

For example, create a dictionary using Map() object:

```
const languages = new Map()
languages.set('EN', 'English');
languages.set('ES', 'Spanish');
languages.set('TA', 'Tamil');
```


Not just with JavaScript String, you can use any type as the value in the dictionary as shown in the following example:

```
// Empty dictionary object 
let lookupData = {}

// Dictionary with single key-value pair 
let name = { "name": "John Doe" }

// Dictionary with multiple key-value pairs 
let person = { "name": "John Doe", "age": 25 }

// Dictionary with numeric keys 
let days = { 1: "Monday", 2: "Tuesday", 3: "Wednesday" }

// Dictionary with boolean values 
let status = { "isActive": true, "hasAccess": false }

// Nested dictionary object 
let people = { "person": { "name": "John Doe", "age": 25 } }

// Dictionary with array as value 
let fruits = { "fruits": ["apple", "banana", "orange"] }

// Dictionary with function as value
let functions = { "calculate": function (a, b) { return a + b; } }

// Dictionary with undefined and null values 
let edgeCases = { "name": undefined, "age": null }
```


### 3\. Using The Object.create() Method

This method allows you to create a dictionary by inheriting properties from another object. 

For example:

```
let languages = Object.create({});
languages.EN = 'English';
languages.ES = 'Spanish';
languages.TA = 'Tamil';
console.log(languages)
```


Though we can create JavaScript dictionaries in different ways, I followed the first way to create a dictionary in this article. Let’s explore different JavaScript dictionary methods to manipulate it.

I would recommend you also follow the same and consistent way to create a dictionary across application code.

Adding key-value pair to a dictionary
-------------------------------------

So dictionary is created, let’s see how to add, modify and remove [key-value pairs](https://www.freecodecamp.org/news/javascript-object-keys-tutorial-how-to-use-a-js-key-value-pair/) from the dictionary. The key names should be unique in the dictionary. Of course, key names are case-sensitive.

You can add items to a dictionary by using the square bracket notation. You can use the set() method if you created your dictionary using Map() method. 

For example, the following example shows how to add new key-value pair using bracket notation:

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

languages['FR'] = 'French'
console.log(languages)
// Output: { EN: 'English', ES: 'Spanish', TA: 'Tamil', FR: 'French' }
```


You can use the following dot notations as well to add key-value pair:

Updating value of a dictionary key
----------------------------------

You can update the value in a dictionary by using the square bracket or dot notation method. For example:

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

languages['EN'] = 'English (US)'
console.log(languages)
// Output: { EN: 'English (US)', ES: 'Spanish', TA: 'Tamil' }
```


In this example, the “English” value is updated with the value “English (US)” using the unique key ‘EN’.

Access dictionary items in JavaScript
-------------------------------------

You can access dictionary-stored key-value pairs by using the square bracket notation, the get() method (if created using the Map() method), the for…in loop, or the for…of loop. 

The following dictionary object is used to show the dictionary iteration example:

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

// Read dictionary value using key
console.log(languages['ES'])
// Output: "Spanish"
```


You can use the following JavaScript dictionary methods and properties to manipulate dictionary object.

Iterating over a dictionary
---------------------------

Because the dictionary is built with Objects, we can quickly iterate through its keys. There are many ways for iterating over the dictionary object. Each method has its own set of benefits and drawbacks.

In this section, we will look at 3 methods for iterating through a dictionary object.

### 1\. Using the for...in loop

This is one of the most common and easy ways to iterate over a dictionary. It allows you to access the keys of the dictionary, one at a time. Here is an example of how to use for loop in dictionary to get key and value:

```

for (let key in languages) {
  console.log(`${key}=${languages[key]}`);
}
// Output: 
EN=English
ES=Spanish
TA=Tamil
```


### 2\. Using the for...of loop

The Object.entries() is one of the object methods. Using this method along with the for…of loop, but it allows you to access the values of the dictionary as an array. For example:

```

for (let key of Object.entries(languages)) {
  console.log(key);
}

// Output: 
[ 'EN', 'English' ]
[ 'ES', 'Spanish' ]
[ 'TA', 'Tamil' ]
```


### 3\. Using the entries() method

```
for (let [key, value] of Object.entries(languages)) {
  console.log(`${key}=${value}`);
}

// Output: 
EN=English
ES=Spanish
TA=Tamil
```


Get all dictionary keys and print
---------------------------------

Keys are the primary means of accessing values in a JavaScript dictionary object. Dictionary keys can be any JavaScript type, including strings, numbers, and symbols. 

Here’s an example of how to create a dictionary object with string keys:

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

console.log(Object.keys(languages))
// Output: ["EN", "ES", "TA"]
```


In this example, the keys are ‘EN’, ‘ES’, and ‘TA’. The corresponding values are ‘English’, ‘Spanish’, and ‘Tamil’ for those keys. Using [JavaScript Object.keys()](https://www.rajamsr.com/javascript-object-keys/) method you can access all dictionary keys.

Get all dictionary values
-------------------------

To retrieve the values of a JavaScript dictionary object, you can use the Object.values() method. This method return values as an array.

Here’s an example:

```
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(Object.values(languages));
// Output: [ 'English', 'Spanish', 'Tamil' ]
```

JavaScript dictionary size or length of dictionary
--------------------------------------------------

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

console.log(Object.keys(languages).length)
// Output: 3
```


In this example, the Object.keys() method returns an array of the keys in the dictionary object (‘EN’, ‘ES’, and ‘TA’). The length property of that array is used to determine the length of the dictionary object. In this case,  there are three keys, so the length is 3.

JavaScript check dictionary contains a key 
----------------------------------

To check if the key is in the dictionary object, you can use the includes() or the hasOwnProperty() method. Here’s an example using the includes():

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

console.log(Object.keys(languages).includes('EN'));
// Output: true

console.log(Object.keys(languages).includes('en'));
// Output: false

```


In this example, the Object.keys() method will return dictionary keys as an array. You can use the [JavaScript includes()](https://www.rajamsr.com/javascript-includes/) Method to check if the ‘EN’ keys exist in the dictionary object.

In JavaScript, string values are case-sensitive. So the dictionary key ‘en’ search returns false because the actual key is in capital letters.

There are two ways to search dictionary keys in a case-insensitive manner. Convert both keys and search text to [JavaScript Lowercase](https://www.rajamsr.com/javascript-string-lowercase/) or convert the keys and text to [JavaScript Uppercase](https://www.rajamsr.com/javascript-string-touppercase/) before searching.

JavaScript dictionary get value by key
--------------------------------------

To retrieve the value associated with a specific key in a JavaScript dictionary object, you can use the bracket notation or the get() method. Here’s an example using the bracket notation:

```
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

console.log(languages['EN']);
// Output: "English"

console.log(languages.EN);
// Output: "English"
```


JavaScript dictionary delete key
--------------------------------

The **delete** operator can be used to remove a key-value pair from a JavaScript dictionary object. Here’s an example of how to use the delete operator:

```
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

delete languages['TA']
console.log(Object.values(languages));
// Output: [ 'English', 'Spanish' ]
```


In this example, the language Tamil was deleted from the dictionary using the key ‘TA’.  If we print the dictionary object “languages”, it will print the remaining key-value pairs. 

Conclusion
-----------------------------------

In conclusion, JavaScript does not have a native dictionary data type. However, we can create JavaScript dictionary objects. The dictionary data structure allows you to store and retrieve data using key-value pairs. They are especially useful when you need rapidly and readily accessible data. 

We explored how to create a dictionary and add or modify dictionary values. There are multiple methods for iterating over a dictionary. You can use the for…in loop, the for…of loop, and the Object.entries() methods. 

You can check the dictionary length by counting its keys. Using the array includes() method you can check whether the key already exists in a dictionary. The JavaScript delete operator can help you to remove a key-value pair from a dictionary object.

How you are going to use JavaScript dictionary object?