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.


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'
};
objects.js
Copied to clipboard!

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'
};
dictionary.js
Copied to clipboard!

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 = 'πŸ“’';
dictionary.js
Copied to clipboard!

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: "πŸ“’"
}
dictionary.js
Copied to clipboard!

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.

Invalid left-hand side assignment when you try to use dash with dot notation

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: "πŸ“˜" }
dictionary.jsNote that bracket notations inside objects are only available in ES6 and above
Copied to clipboard!

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;
dictionary.js
Copied to clipboard!

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];
dictionary.js
Copied to clipboard!

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]}`);
    }
}
dictionary.js
Copied to clipboard!

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.


Things to Keep in Mind

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

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

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Read more on
πŸŽ‰ Thank you for subscribing to our newsletter. x