Objects and Object Methods

Objectives

By the end of this chapter, you should be able to:

• Create objects using object literal syntax
• Access properties with dot notation and bracket notation
• Add, update, and delete properties
• List an object’s keys, values, and entries with Object.keys(), Object.values(), and Object.entries()

💡 Why this matters: Arrays are great for ordered lists, but most real-world data has named fields: a user has a name and an email, a product has a price and a title. Objects are how JavaScript models that.

Creating an Object

An object literal is written with curly braces, holding key: value pairs separated by commas.

const user = {
  name: "Priya",
  age: 29,
  isActive: true,
};

console.log(user);
// { name: 'Priya', age: 29, isActive: true }

Each key is a label for its value. Unlike an array, order isn’t the point, the label is.

Accessing Properties: Dot vs Bracket Notation

Dot notation is the most common way to read a property, when you know the exact name ahead of time.

const user = { name: "Priya", age: 29 };
console.log(user.name);
// Priya

Bracket notation does the same thing, but the key is written as a string, which means it can come from a variable.

const user = { name: "Priya", age: 29 };
console.log(user["name"]);
// Priya

const key = "age";
console.log(user[key]);
// 29

Use dot notation by default. Switch to bracket notation when the property name is dynamic (stored in a variable) or contains characters that aren’t valid in dot notation, like a space.

const product = { "item name": "Notebook" };
console.log(product["item name"]);
// Notebook

Adding, Updating, and Deleting Properties

Assign to a new key to add a property that doesn’t exist yet.

const user = { name: "Priya" };
user.age = 29;
console.log(user);
// { name: 'Priya', age: 29 }

Assign to an existing key to update it.

const user = { name: "Priya", age: 29 };
user.age = 30;
console.log(user);
// { name: 'Priya', age: 30 }

Use delete to remove a property entirely.

const user = { name: "Priya", age: 30 };
delete user.age;
console.log(user);
// { name: 'Priya' }

Object.keys(), Object.values(), and Object.entries()

These three built-in functions let you pull an object’s contents out as arrays, which is useful whenever you want to loop over an object or inspect it programmatically.

Object.keys() returns an array of just the property names.

const car = { make: "Toyota", model: "Corolla", year: 2022 };
console.log(Object.keys(car));
// [ 'make', 'model', 'year' ]

Object.values() returns an array of just the values.

const car = { make: "Toyota", model: "Corolla", year: 2022 };
console.log(Object.values(car));
// [ 'Toyota', 'Corolla', 2022 ]

Object.entries() returns an array of [key, value] pairs, one small array per property.

const car = { make: "Toyota", model: "Corolla", year: 2022 };
console.log(Object.entries(car));
// [ [ 'make', 'Toyota' ], [ 'model', 'Corolla' ], [ 'year', 2022 ] ]

Object.entries() is especially handy once you get to looping over objects later in this module, since each [key, value] pair can be pulled apart in one step.

Try It

1. Create an object called book with title, author, and year properties. Log it.
2. Read book.title with dot notation, then read book["author"] with bracket notation.
3. Add a pages property to book, then update year to a different value. Log book after both changes.
4. Delete the pages property you just added. Log book again.
5. Given const scores = { Erin: 90, Sam: 78, Maya: 85 }, log the result of Object.keys(), Object.values(), and Object.entries() on it.

Recap

• Object literals store labeled data as key: value pairs inside curly braces.
• Dot notation reads a known property name; bracket notation reads a property name from a variable or one with special characters.
• Assigning to a key adds or updates a property; delete removes one.
• Object.keys(), Object.values(), and Object.entries() turn an object’s contents into arrays you can inspect or loop over.

Next lesson: destructuring, spread, and rest, for pulling values out of arrays and objects and combining them.