How to Create Dictionaries in JavaScript

In programming languages, a common data structure called a dictionary is often used for storing data in key-value pairs. It provides a flexible way to store and read data when it is presented with a key.

Unlike in statically-typed languages, however, there is no such type as Dictionary in JavaScript. So how do you create one? You have a couple of options.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

---

Making a Dictionary in JavaScript

In JavaScript, dictionaries can be created through Objects. To create a new object, among many other options, you can use these two:

// Using the built-in Object
const obj = new Object();

// Using object literals
const obj = {
    key: 'value'
};

More commonly, you’ll find that object literals are used. If you’re interested what are some other ways to create objects, check out the article below.

How to create objects in JavaScript

How to Add Values to a Dictionary

To add values to a dictionary — or JavaScript object —, you can initialize it with the needed key-value pairs as in the previous example:

// Add default values during initialization
const dictionary = {
    PUBLIC_API_KEY: '1c6aa69fb9d27cb4f29c81611d0b1ff5',
    PRIVATE_API_KEY: '4fa758e6d388593f8637da4bdd697ef6'
};

To later populate it with additional values, you can use indexes, bracket notation, or just calling a property directly with the dot notation:

// Using an index
dictionary[2] = 'c8b0c9e9b1618b4fb35c47ed4e2fadc7';

// Using bracket notation
dictionary['blue-book'] = '📘';

// Calling the property directly with dot notation
dictionary.book = '📒';

If you try to log out dictionary to the console now, you will get the following output:

{
    2: "c8b0c9e9b1618b4fb35c47ed4e2fadc7"
    PRIVATE_API_KEY: "4fa758e6d388593f8637da4bdd697ef6"
    PUBLIC_API_KEY: "1c6aa69fb9d27cb4f29c81611d0b1ff5"
    blue-book: "📘"
    book: "📒"
}

Note that with bracket notation, you can also use a dash. This is not the case for the other options. If you try to set it through a dot notation, you will get an error.

You also have the option to use other variables as a name for keys in the dictionary, using bracket notation. Just simply pass the variable between brackets:

const key = 'blue-book';
const dictionary = {
    [key]: '📘'
};

// You can also do
dictionary[key] = '📘';

console.log(dictionary);

// The above console.log will output:
{ blue-book: "📘" }

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

---

How to Access Keys

If you want to access these values, again you can use the same options as before, just without the assignment.

// Will return "c8b0c9e9b1618b4fb35c47ed4e2fadc7"
dictionary[2];

// Will return "📘"
dictionary['blue-book'];

// Will return "📒"
dictionary.book;

Note that if you want to access a property that has a dash or number in it, you have to use bracket notation again. Accessing properties with variables is also possible, just like creating new ones.

const key = 'blue-book';

// Will return "📘";
dictionary[key];

Iterating Through Dictionaries

If you want to go through your whole dictionary now that it is ready to be used, you can use a for...in loop in the following way:

const dictionary = { ... };

for (const key in dictionary) {
    if (dictionary.hasOwnProperty(key)) {
        // work on properties
        console.log(`key: ${key}, value: ${dictionary[key]}`);
    }
}

In order to filter out inherited properties, you can use an if statement to check, whether the property you are working on belongs to the dictionary. Note that you can access values inside the loop with bracket notation.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

---

Things to Keep in Mind

And that is how you can create dictionaries in JavaScript. Some things to keep in mind:

• Use object literals for better readability when creating new dictionaries
• Try to stick to one naming convention whether it be camelCase, snake_case or kebab-case.
• You can use variables to write and access properties
• Make sure to include an if statement inside a for...in if you want to filter out inherited properties.

Do you have anything to add to this tutorial? Let us know in the comments below! Thank you for reading through, happy coding!