How to Create Dictionary and Add Key-Value Pairs in JavaScript

JavaScript has no dedicated dictionary data type. For a mapping from string keys to values, an object is often a practical choice: its properties associate keys with values, and you can add or change them as your program runs. Object keys are strings (or symbols); other values used as property keys are converted to strings. If you need keys that retain their types, or a collection designed specifically for frequent additions and removals, consider Map instead.

Model a Dictionary with a JavaScript Object

An object can represent a dictionary when your entries have named keys, such as a user name, a setting, or a product ID. Each property stores one value. This is useful for direct lookup by a known key, but objects also have inherited properties, so check that a key belongs to your object before treating it as an entry. The own-property check in the dynamic-key example below demonstrates this distinction.

Create a Dictionary with an Object Literal

An object literal creates an object directly with braces; it does not use new. Use {} for a mapping you will fill later, or list initial properties between the braces. Property names that are valid JavaScript identifiers can be written without quotes; quote names containing spaces or punctuation.

const person = {};

const profile = {
  name: "Shiv",
  age: 21,
  job: "Freelancer",
  skills: "JavaScript",
};

person starts with no own entries. profile starts with four. const prevents reassignment of the variable, but it does not freeze the object: its properties can still be added or updated.

Add, Update, and Read Properties

Use dot notation when a property name is fixed and is a valid identifier. Assigning a value creates that property if it is absent and replaces its value if it already exists. Read it with the same notation. For names that are not valid identifiers, use brackets and a quoted string.

const settings = {};
settings.theme = "light";   // Add a property
settings.theme = "dark";    // Update that property
const selectedTheme = settings.theme; // Read its value

After these statements, selectedTheme contains "dark". A property assignment is not written as a generic [key] = value declaration; use the object followed by dot or bracket notation, such as settings.theme or settings["theme"].

Use Bracket Notation for Dynamic Keys

Bracket notation accepts an expression, so it is the right choice when a key comes from a variable. It also works for property names with spaces or punctuation. Use Object.hasOwn() to distinguish an entry stored directly on the object from an inherited property. In older environments where that method is unavailable, Object.prototype.hasOwnProperty.call(object, key) provides the same own-property check.

Run this example:

const scores = { Ada: 10 };
const player = "Lin";
scores[player] = 12;
scores.Ada = 11;
const linScore = scores[player];
const hasLin = Object.hasOwn(scores, player);
console.log(linScore, hasLin, scores.Ada);

The lookup uses the value in player as the key. The own-property check confirms that Lin is stored on scores; the final expression reads Ada’s updated score.

Run a Browser Example

This browser page starts with three entries. Select the button to add one property with dot notation and another with a dynamic bracket key; the page then displays the resulting object. The example is optional: the same object operations work in JavaScript code outside a browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dictionary in JavaScript</title>
  </head>
  <body>
    <pre id="before"></pre>
    <button id="add-pairs" type="button">Add new key-value pairs</button>
    <pre id="after"></pre>
    <script>
      const dict = { key_1: 1, key_2: "2", key_3: 3 };
      document.getElementById("before").textContent = JSON.stringify(dict, null, 2);
      document.getElementById("add-pairs").addEventListener("click", () => {
        dict.new_key = "new_value";
        const anotherKey = "another_new_key";
        dict[anotherKey] = "another_value";
        document.getElementById("after").textContent = JSON.stringify(dict, null, 2);
      });
    </script>
  </body>
</html>

The image shows the example’s initial entries, add-pairs button, and displayed entries after the button is selected. The code and values remain available as selectable text.

The browser example displays the initial dictionary-like object and the added new_key and another_new_key properties.