
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'
};
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: "π" }

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.

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
orkebab-case
. - You can use variables to write and access properties
- Make sure to include an
if
statement inside afor...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!
Unlimited access to hundred of tutorials
Access to exclusive interactive lessons
Remove ads to learn without distractions