Object basics

Objects group related data

An object is one value that holds several related values. Each value is stored under a name.

Say you want to keep three facts about a user. You could make three separate variables: userName, userAge, and userRole. Or you can make one user object and keep all three inside it, as user.name, user.age, and user.role.

Each thing stored in an object is called a property. A property has two parts:

• The key is the property's name, like name. It is also called the property name.
• The value is what is stored under that name, like "Ada".

You met objects in the Data types lesson. There you saw that an object is not a primitive. A primitive is a single simple value, like a number or a string. The Variables lesson showed that you can change an object's properties, even when the object is stored in a const.

This lesson shows the everyday things you do with an object:

• make one,
• read and change its properties,
• check whether a property exists,
• see the order of its keys,
• and delete a property.

This lesson is about properties that store data. Later lessons in Module 8 cover the rest:

• methods, which are functions stored in an object, and this,
• constructors, which make many objects of the same shape,
• Symbols, a special kind of key,
• and how an object turns into a primitive, like a string.

The simplest way to make an object is an object literal. "Literal" means you write the value straight into your code. An object literal looks like this:

• It starts with { and ends with }.
• Inside are the properties, with a comma after each one.
• Most properties are written as key: value.

The key is always stored as a string. The value can be any JavaScript value: a string, a number, a boolean, null, an array, or even another object.

1const user = {2  name: "Ada",3  "favorite color": "blue",4  profile: { city: "Pune" },5};6console.log(user.name);7console.log(user["favorite color"]);

Line 2 uses the key name. It is a valid identifier: a name made of letters, digits, _, or $ that does not start with a digit. So it needs no quotes.

Line 3 uses the key favorite color. A key can be any string, even one with a space. But this key is not a valid identifier, so it must be written in quotes.

Line 4 stores another object as the value of profile. The comma at the end of line 4, after the last property, is called a trailing comma. It is allowed, and it makes it easier to add another property later.

Line 6 prints Ada. Line 7 reads the key with the space using square brackets and prints blue. You'll see why it needs square brackets in the next section.

After an object exists, you can add or change a property with =:

• If the key is new, JavaScript adds a new property.
• If the key is already there, JavaScript replaces its value.

This is useful for a shopping cart, a form, or a profile that gets more details later.

1const cart = { total: 3 };2cart.items = 1;3cart.total = 5;4console.log(cart.items);5console.log(cart.total);

The cart starts with one property, total. Line 2 adds items, because the cart did not have that key yet. Line 3 replaces the old total, 3, with 5. Lines 4 and 5 print 1 and 5. It is still the same cart: setting a property never makes a second object.

1const order = { drink: "tea", drink: "coffee" };2console.log(order.drink);

Here the key drink appears twice in one object literal. The object still gets only one drink property, and it keeps the last value. So line 2 prints coffee. Give each key only once. A repeated key is almost always a mistake, so fix it when you see one.

1const user = { profile: { city: "Pune" } };2console.log(user.profile.city);3console.log(user.settings?.theme);

An object stored inside another object is called a nested object. Line 2 reads user.profile first, then city inside it. It prints Pune.

Line 3 reads user.settings, which does not exist. The ?. after it means: "if the value on the left is undefined or null, stop here and give undefined." So line 3 prints undefined. Without ?., reading theme from undefined would throw a TypeError. You learned ?. in the Nullish & optional chaining lesson.

There are two ways to read or write a property:

• Dot access, like user.name. Use it when you know the key while you write the code, and the key is a valid identifier.
• Bracket access, like user["favorite color"] or user[field]. Inside the square brackets goes a string, or a variable that holds the key.

1const user = { name: "Asha" };2const key = "name";3console.log(user[key]);

Line 2 stores the text "name" in the variable key. That is the name of the property, not its value. On line 3, JavaScript first reads key and gets "name". Then it reads the name property of user. It prints Asha.

1const user = {2  name: "Ada",3  age: "36",4  role: "admin",5};6const key = "age";7const value = "37";8user[key] = value;9delete user[key];10console.log(Object.keys(user).join(", "));

Try it. Type favorite color as the key and blue as the value, then press Add/change. You can't write that key after a dot, because of the space. Brackets can still read it.

Next, type key as the key and press Add/change. Now user.key shows a value instead of undefined. That is because the object now really has a property named key.

1const user = { name: "Ada", age: 36, "favorite color": "blue" };Run2const field = "age";3console.log(user.name);4console.log(user["favorite color"]);5console.log(user[field]);6console.log(user.field);

Line 6 shows the most common mistake. user.field looks like it should use the variable field. It doesn't: a dot never reads a variable. It looks for a key that is the word "field" itself. This object has no such key, so you get undefined. When the key is stored in a variable, use brackets.

Object literals have two shortcuts you will see often:

• A computed property name puts square brackets around the key inside the literal: { [key]: value }. JavaScript first works out the value of key. Then it uses that result as the property name.
• A shorthand property lets you write { name } instead of { name: name }. It works when the variable and the property have the same name.

1const field = "drink";2const order = { [field]: "tea" };3console.log(order.drink);

Line 1 stores the text "drink" in field. On line 2, [field] reads that variable, so the object gets a property named drink. You need the square brackets only while you make the key. Line 3 can use a dot, because you know the key is drink. It prints tea.

1const key = "favorite color";Run2const value = "blue";3const name = "Ada";4const age = 36;5const user = { name, age, [key]: value };6console.log(user.name);7console.log(user["favorite color"]);

After line 5, the properties are ordinary. The object just has the keys name, age, and favorite color. Nothing remembers how they were written. The Methods & this lesson adds one more shortcut: a short way to write a function inside an object.

Reading a property tells you its value. Sometimes you need to ask something else: does this property exist at all? Reading the value can't always tell you, for two reasons:

• A property can exist and hold the value undefined. A missing property also reads as undefined.
• Ordinary objects inherit some built-in properties, like toString. Inherited means your object can use the property, but it is stored on another object, not on yours. That other object is Object.prototype; a later lesson explains it.

1const user = { name: "Ada", age: undefined };2console.log("age" in user);3console.log(Object.hasOwn(user, "age"));4console.log(user.age === undefined);5console.log("toString" in user);6console.log(Object.hasOwn(user, "toString"));

The table shows what each line prints. Read each row as: "this check prints this, and here is what that tells you."

Which check should you use?

• Use Object.hasOwn(obj, key) to ask: "Does this object itself have this key?" It ignores inherited properties.
• Use key in obj when inherited properties should count too.
• Don't use obj[key] === undefined to check whether a key exists. It is true for a missing key, and also for a key that holds undefined.

1const user = { hasOwnProperty: false };2console.log(Object.hasOwn(user, "hasOwnProperty"));

Objects also inherit an older method called hasOwnProperty. In older code you may see obj.hasOwnProperty(key). But this object has its own key named hasOwnProperty, and it holds false. So user.hasOwnProperty("name") would throw a TypeError, because false is not a function.

Object.hasOwn belongs to Object, not to your object, so it still works. Line 2 prints true. Use Object.hasOwn in new code.

Objects are not arrays. If order is the main point, use an array. Still, JavaScript has fixed rules for the order of an object's keys. You see this order when you use Object.keys(obj), which gives an array of the object's own keys, or a for...in loop. The rules:

1. First come the integer-like keys, from smallest to largest. These are keys like "3" or "20": whole numbers written the normal way, with no leading zero.
2. Then come all the other string keys, in the order you added them.

Symbols, a special kind of key, are left out by Object.keys and for...in. Symbols have their own lesson.

1const codes = {};Run2codes.name = "Ada";3codes[20] = "twenty";4codes[3] = "three";5codes["01"] = "leading zero";6codes.added = "last";7console.log(Object.keys(codes).join(" → "));

Look at the result. 3 comes before 20, even though line 4 added 3 after line 3 added 20. Both are integer-like keys, so they go first, smallest first.

The key "01" is different. It has a leading zero, so it is not the normal way to write the number 1. JavaScript treats it as an ordinary string key. It stays in the order it was added, after name.

The for…of & for…in lesson showed loops over keys. The same advice applies here: if your code depends on order, use an array of objects. Don't rely on the key order of one object.

The Rest of the operators lesson introduced delete. delete obj.key removes the property from the object. That is not the same as setting it to undefined:

• obj.key = undefined keeps the key. Only its value changes, to undefined.
• delete obj.key removes the key and its value.

1const user = { name: "Ada", age: 36, mood: "curious" };Run2user.mood = undefined;3console.log(Object.keys(user).join(", "));4delete user.age;5console.log(Object.keys(user).join(", "));6console.log("age" in user);7console.log("mood" in user);

Use delete when the object should no longer have that property. Use obj.key = undefined only when the key should stay, but it has no value right now.

Where you’ll use objects

Use an object whenever names matter. A settings object is clearer than many separate variables, because each value has its name right next to it. These often start as objects:

• the values someone typed into a form,
• data that a server sends back,
• feature flags, which switch parts of an app on or off,
• lists of translations, from a word to the same word in another language,
• and the current state of a part of the page.

1const settings = {2  theme: "dark",3  notifications: true,4  shortcuts: { save: "⌘S" },5};6 7const field = "theme";8console.log(settings[field]);9console.log(settings.shortcuts?.save);

The same rules apply here:

• Brackets for a key in a variable: settings[field] on line 8 prints dark.
• A dot for a key you know, and ?. for a nested value that might be missing: line 9 prints ⌘S.

1const response = { name: "Asha", city: "Delhi" };2const city = Object.hasOwn(response, "city") ? response.city : "Not set";3console.log(city);

Data from a server or a form may leave out fields that are optional. Line 2 uses the conditional operator: test ? a : b gives a when the test is true, and b when it is false. Here the test is Object.hasOwn(response, "city"):

• If city is there, city gets response.city.
• If it is missing, city gets "Not set".

This response has a city, so line 3 prints Delhi.

The table below helps you pick a tool. Read each row as: "in this situation, ask this question, and use this tool."

Common misconceptions

1const user = { age: 36 };2const field = "age";3console.log(user[field]);4console.log(user.field);5user.age = undefined;6console.log(Object.hasOwn(user, "age"));

Line 3 prints 36. Line 4 prints undefined. Line 6 prints true, even though line 5 set age to undefined. Each belief below is a common mistake, followed by what really happens.

• "A dot reads variables." It doesn't. user.field looks for a key that is the word "field". Use user[field] when the key is stored in a variable.
• "If the value is undefined, the property is missing." Not always. A property can exist and hold undefined. Use Object.hasOwn to check whether it exists.
• "in and Object.hasOwn are the same." They are not. in also counts inherited properties. Object.hasOwn checks only the object itself.
• "Keys always come out in the order I typed them." Integer-like keys come out first, smallest first.
• "delete just empties the value." delete removes the key too. Setting a property to undefined keeps the key and changes only the value.
• "A const object can't change." const only stops you from giving the variable a new value. The object's properties can still change.

Key takeaways

• An object literal makes one value with named properties.
• Use a dot when you know the key and it is a valid identifier. Use square brackets when the key is in a variable, or has a space or a dash.
• A computed name { [key]: value } and a shorthand { name } both make ordinary properties.
• Object.hasOwn checks only the object's own properties. in also counts inherited ones.
• Object.keys lists integer-like keys first, smallest first. The other keys follow, in the order you added them.
• delete removes a property. Setting it to undefined keeps the key.

Final definition: An object is a JavaScript value that keeps related values under names, called keys. You can add, read, change, check, list, and remove its properties.

Up next: Objects & references. You'll learn why two variables can point to the same object.