Suggest an edit

Improve this article

Refine the answer for “Key-value pairs”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**A key-value pair is the basis of how data is stored in JavaScript objects and in many other structures: the key is the property name and the value is the data that belongs to that name.** An object is essentially a set of such pairs, and each pair describes one piece of data.

## Theory

### TL;DR

- A key is the property name you use to reach the data.
- A value is the data bound to that key.
- One property of an object is one key-value pair.
- Keys are unique inside an object; assigning the same key again overwrites the value.
- Object keys are always strings or `Symbol`; numbers are converted to strings automatically.
- Reading a value: dot notation (`user.name`) when the name is known, brackets (`user[key]`) when the key is in a variable.
- The same model powers `Map`, `URLSearchParams`, `FormData` and the JSON format.

### Quick example

```javascript
const user = {
  name: 'Maria', // key -> value
  age: 25,
  city: 'Kyiv'
};

console.log(user.name); // "Maria"
```

Here `name`, `age`, `city` are the keys (or "property names"), and `'Maria'`, `25`, `'Kyiv'` are the values.

### Terms

| Element | Description |
| --- | --- |
| Key | The property name you use to reach the data |
| Value | The data bound to that key |
| Example | `{ "key": "value" }` |
| Typical storage format | `{ name: 'Maria', age: 25 }` |

### How keys work

- Keys are always **unique** inside a single object: if you write the same key twice, the last value wins.
- They are normally **strings** (or `Symbol`), even when you write a number:

```javascript
const obj = { 1: 'a', 2: 'b' };
console.log(Object.keys(obj)); // ["1", "2"]
```

So the numeric literal `1` used as a key becomes the string `"1"`. The exception is `Symbol`: symbol keys are not converted to strings and do not show up in `Object.keys()`.

### Reading a value by its key

```javascript
console.log(user.name);    // "Maria"
console.log(user['city']); // "Kyiv"
```

Access is possible:

- with **dot notation**, when the name is known in advance;
- with **brackets**, when the key is stored in a variable or computed.

```javascript
const key = 'age';
console.log(user[key]); // 25
```

Brackets are also required when the key is not a valid identifier, for example `user['first name']`.

### What the pairs are made of: Object.entries

You can see the pairs as an array:

```javascript
console.log(Object.entries(user));
```

Output:

```javascript
[
  ['name', 'Maria'],
  ['age', 25],
  ['city', 'Kyiv']
]
```

Every pair is `[key, value]`. Next to it, `Object.keys(user)` returns only the keys and `Object.values(user)` returns only the values.

### Where else the key-value principle appears

| Structure | Example | What it stores |
| --- | --- | --- |
| `Object` | `{ name: 'Maria' }` | Keys are strings or `Symbol` |
| `Map` | `map.set('role', 'admin')` | Keys of any type, including objects |
| `URLSearchParams` | `?id=1&name=Maria` | Keys and values from a URL string |
| `FormData` | `form.append('email', 'maria@example.com')` | Form fields |

The same principle underlies JSON, HTTP headers, environment variables and key-value stores such as Redis.

### Common mistakes

- **Assuming the key keeps its type.** An object key is always coerced to a string, so `obj[1]` and `obj['1']` are the same property. If you need keys of other types, use a `Map`.
- **Mixing up dots and brackets.** `user.key` looks for a property literally named `"key"`, not for the value of the variable `key`. For a variable you need brackets: `user[key]`.
- **Testing for a key by its value.** The condition `if (user.age)` is false for `0`, `''` and `null`. The correct check is `'age' in user` or `Object.hasOwn(user, 'age')`.
- **Duplicating keys.** In an object literal a repeated key silently overwrites the previous one, with no error.
- **Expecting `Object.keys()` to show everything.** Symbol keys and non-enumerable properties are not included.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts660 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.