Key-value pairs

JavaScriptJunior~3 min read

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.