How to Create Dictionaries in JavaScript

How to Create Dictionaries in JavaScript

Taking a look at the object data type
Ferenc Almasi β€’ πŸ”„ 2020 December 12 β€’ πŸ“– 4 min read

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.

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

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.js Note that bracket notations inside objects are only available in ES6 and above
Copied to clipboard!
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

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.

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

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!

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended