Objects — Reading and Writing Properties

Handle a single product with its name, price, and stock count in separate variables, and variable names start colliding the moment you have a 2nd product. Bundle them into an array instead, and you're managing them by position — the person writing the code has to remember whether product[1] is the price or the stock count.

An object (a data structure that lines up key-value pairs in one variable) lets you get and set values by name instead, as in product.price.

Building Key-Value Pairs — Object Literals

You build an object by listing key: value pairs, separated by commas, inside { and }. This is called an object literal (writing keys and values directly inside curly braces to build an object).

Each individual pair is a property (a key-value pair an object holds). length, from article 4, is a property too — for an object, this key-value pair is what that word refers to.

A key is a string, and you can drop the quotes for names like name or price. A value can be a number, string, or boolean — or even another array or object. Write the same key twice, and only the one written last sticks around.

To read a value, write a dot after the object followed by the key name, as in product.price. This is dot notation (writing a key name directly after a dot to read a property).

The order you wrote things in doesn't matter for reading, so there's no need to remember it.

Reading a key that isn't registered doesn't error — it returns undefined, the same as reading an out-of-range index on an array.

const product = {
  name: "Wireless Mouse",
  price: 3980,
  stock: 24,
};

console.log(product.name);    // Wireless Mouse
console.log(product.price);   // 3980

// Reading an unregistered key doesn't error
console.log(product.color);   // undefined

// Overwriting uses the same syntax as an assignment
product.stock = 23;
console.log(product.stock);   // 23

Bundle a member's profile into a single object and pull out the fields you need. The values to use are in the console's comments.

① Create an object with 3 properties: name, plan, and points.

② Display the name and plan on one line, formatted as "Alice Kim / Standard".

③ Display the points.

④ Read the unregistered email property and display it as-is.

(If it runs correctly, an explanation will appear.)

Putting an Object Inside an Object

Like order data returned from an API, sometimes a single record needs to hold a further bundle of information. Put an object as a value, and it nests — you can chain . to read all the way inside, as in order.customer.name.

Watch out when a key partway through the chain is missing.

order.shipping.address uses . on order.shipping, which is undefined, and that stops with a TypeError. A way to read through a missing step without stopping is covered in the next article.

const order = {
  orderId: "ORD-1042",
  customer: {
    name: "Grace Lee",
    email: "grace@example.com",
  },
  total: 12800,
};

console.log(order.customer.name);    // Grace Lee
console.log(order.customer.email);   // grace@example.com

// You can chain string operations onto a value you pull out
console.log(order.customer.name.length);   // 9

Specifying a Key with a String or Variable — Bracket Notation

On a screen where the user picks which field to display, which key to read isn't decided at the time you write the code. Dot notation writes the key name directly into the code, so it doesn't work here.

Write a string inside [], as in product["price"], and that string gets read as the key. This is bracket notation (reading a property using the string written inside square brackets as the key).

What's inside [] gets evaluated first, and the result is used as the key name — you can even write something like product["item" + "Name"]. Put a variable in there, and the key gets decided at runtime.

Dot notation only works for key names with no symbols or spaces that don't start with a digit. A key like "release-date", with a hyphen, can only be read with bracket notation.

const product = {
  name: "Wireless Mouse",
  price: 3980,
  "release-date": "2026-04-01",
};

// Write the key name directly as a string
console.log(product["price"]);          // 3980

// The key name lives in a variable
const field = "name";
console.log(product[field]);            // Wireless Mouse

// A key with a symbol can only be read with bracket notation
console.log(product["release-date"]);   // 2026-04-01

// Dot notation would look for a key literally named "field"
console.log(product.field);             // undefined

Read a value with the key given by a variable, so the field you display can switch at runtime. product is already declared.

① Set up a variable holding a field name, and display the price by reading through that variable.

② Swap the same variable's contents to the stock field name, and display the stock count.

③ Display the value of the key that contains a hyphen.

④ Read the product name with both dot notation and bracket notation, and display whether they're the same value.

Adding, Removing, and Checking for Properties

Like data on a settings screen, some objects gain fields over time, or lose fields that are no longer used. You can add or remove properties on an object even after it's been created.

Adding is just assigning a value to a key that doesn't exist yet. Write settings.notifications = true;, and a new property appears right there. Just like with arrays, you can add or remove even on an object declared with const.

To remove one, write delete settings.language;. delete (an operator that removes a property from an object) removes the key entirely, so reading it afterward returns undefined.

Check whether a key exists with "language" in settings. in (an operator that returns whether a key exists on an object, as true or false) takes a key name string on the left and an object on the right.

Even a property whose value is undefined returns true, as long as the key itself exists.

A Typo'd Key Name Doesn't Error

Read a key that doesn't exist, like member.piont, and execution doesn't stop — it just returns undefined. Without an error, you might not notice until a display comes up blank or a calculation turns into NaN. To check whether a key exists, use in, as in "points" in member.

const settings = {
  theme: "dark",
  language: "en",
};

// Adding is just an assignment
settings.notifications = true;
console.log(settings.notifications);   // true

// delete removes the key entirely
delete settings.language;
console.log(settings.language);        // undefined

// in returns whether the key exists
console.log("language" in settings);   // false
console.log("theme" in settings);      // true

// Even with an undefined value, true if the key exists
settings.theme = undefined;
console.log("theme" in settings);      // true

Add and remove fields on an app's settings object, and check what's left. settings is already declared.

① Add a notifications field, for whether to receive notifications, with the value true.

② Remove the language field.

③ Check and display, one at a time, whether the field you added and the one you removed still exist.

④ Display the settings object's contents as-is after the changes.

Pulling Out Keys and Values Together — Object.keys / values / entries

When you want to count how many settings exist, or list out every registered field, writing out each key name one at a time doesn't scale. Convert an object's contents into an array, and every array operation becomes available to you.

Object.keys(object) returns an array of just the keys. Object.values(object) returns an array of just the values, and Object.entries(object) returns an array of [key, value] pairs, each a 2-element array.

None of them change the original object.

Since what comes back is an array, you can count the fields with length, join them with join, or search them with includes. Object.keys(settings).length is exactly the object's property count.

const order = {
  orderId: "ORD-1042",
  customer: "Grace Lee",
  total: 12800,
};

// Pull out just the keys / just the values as arrays
console.log(Object.keys(order).join(", "));       // orderId, customer, total
console.log(Object.values(order).join(" / "));    // ORD-1042 / Grace Lee / 12800

// Count the fields with the array's length
console.log(Object.keys(order).length);           // 3

// entries returns an array of [key, value] pairs
console.log(Object.entries(order)[1].join(": ")); // customer: Grace Lee

Pull the contents of an order object out as keys, values, and pairs, and list them. order is already declared.

① Pull out just the keys, joined with ", ", and display them.

② Display whether "Grace Lee" is included among the values.

③ Display how many key-value pairs there are.

④ Format each pair, one at a time, as "key: value", and display all 3 lines.