How to create a dictionary in JavaScript with key-value pairs?

Are you ready to create a dictionary in JavaScript? 

To create a dictionary, we just need something called JavaScript Objects.

We put our information into pairs, like a key and a value. It’s a pretty straightforward thing to do, and you can finish it up in just a few minutes.

Now, let’s continue to level up our knowledge of creating a dictionary in JavaScript.

What is a dictionary in JavaScript?

A dictionary in JavaScript is a data structure that stores data in key-value pairs, allowing you to look up and retrieve specific values using their keys.

Once you have stored data in a dictionary, you can perform other actions such as iterating over each item, checking if an item exists, or deleting an item that is no longer needed.

However, JavaScript doesn’t have a built-in dictionary data structure, but it can be done using different methods.

How to create dictionary in JavaScript? Solutions

In JavaScript, you can create a dictionary-like structure using an object.

Here are some common methods to create a dictionary with key-value pairs in JS:

Using Object Literal Notation

This method creates an object with key-value pairs using the object literal notation.

Here’s an example:

let sampleDict = {
Website: "Itsourcecode",
Offers: "Free source code"
};
console.log(sampleDict);

Output:

{ Website: 'Itsourcecode', Offers: 'Free source code' }

Using the Object Constructor

This method creates an empty object using the Object constructor and then adds key-value pairs to it.

Here’s an example:

let sampleDict = new Object();
sampleDict.name = "Itsourcode";
sampleDict.age = "18";
console.log(sampleDict);

Output:

{ name: 'Itsourcode', age: '18' }

A step-by-step guide on creating a dictionary in JavaScript

Even though JavaScript doesn’t have a built-in “Dictionary” type, you can easily make and work with a dictionary-like object.

Here’s a step-by-step guide on how to create a dictionary in JS using an object:

Step 1: Initialize an empty object

You can create an empty object using the object literal notation or the Object constructor.

Here’s an example using the object literal notation:

let sampleDict = {};

Step 2: Add key-value pairs

You can add key-value pairs to the object using the dot notation or the square bracket notation.

Here’s an example using the dot notation:

sampleDict.Name = "Itsc";
sampleDict.Age = 18;

Step 3: Access values

You can access the values stored in the dictionary using the dot notation or the square bracket notation.

Here’s an example using the dot notation:

console.log(sampleDict.key1);

Here’s the complete code:

let sampleDict = {};
sampleDict.Name = "Itsc";
sampleDict.Age = 18;

console.log(sampleDict.Name);

Output:

Itsc

Step 4: Iterate over key-value pairs

You can iterate over the key-value pairs in the dictionary using a for…in loop.

Here’s an example:

for (let key in sampleDict) {
console.log(key + ': ' + sampleDict[key]);
}

Here’s the complete code:

let sampleDict = {};

sampleDict.Name = "Itsc";
sampleDict.Age = "18";
for (let key in sampleDict) {
console.log(key + ': ' + sampleDict[key]);
}

Output:

Name: Itsc
Age: 18

Conclusion

In conclusion, this article has provided a step-by-step guide on creating dictionaries in JavaScript using objects.

Though JavaScript doesn’t offer a built-in dictionary data structure, you’ve learned how to simulate this functionality using objects with key-value pairs.

By following the step-by-step guide, you can easily initialize, add data, access values, and iterate through key-value pairs in your dictionary-like object.

Whether you choose the object literal notation or the Object constructor, you now have the knowledge to effectively manage and manipulate data using dictionaries in JavaScript.

We are hoping that this article provides you with enough information that helps you understand how to create dictionary in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

• JavaScript double bang
• Double click in JavaScript
• Console log JavaScript Object

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →