Creating Objects in JavaScript

In the previous lesson, we learned how to check whether every item in an array passes a test. Now let’s learn how to group related data together using objects.

📦 What is an Object?

An object stores data as key-value pairs. Each key is a name (called a property), and each key points to a value. This lets you bundle related information into one place instead of using many separate variables.

You create an object with curly braces {}. Inside, you list each property as key: value, separated by commas.

const user = {
  name: "Alex",
  age: 28,
};

console.log(user); // { name: "Alex", age: 28 }

Let’s walk through what this code does:

• const user = { starts a new object and stores it in the user variable.
• name: "Alex", adds a property named name with the string value "Alex".
• age: 28, adds a second property named age with the number value 28.
• console.log(user) prints the whole object, so we see both properties together.

Here, user is one object that holds two properties: name and age. Instead of two loose variables, the data lives together in one place.

🔑 Accessing Properties

You can read a property in two ways: dot notation and bracket notation. Dot notation is the most common because it is short and clear.

const user = {
  name: "Alex",
  age: 28,
};

console.log(user.name); // "Alex"
console.log(user["age"]); // 28

Let’s see how each line reads a value:

• user.name uses dot notation to read the name property, which gives "Alex".
• user["age"] uses bracket notation with the property name as a string, which gives 28.

The table below compares the two ways of accessing a property.

Bracket notation is required when the property name is stored in a variable, because dot notation would look for a literal property instead.

const user = {
  name: "Alex",
  age: 28,
};

const field = "name";

console.log(user[field]); // "Alex"  → uses the value of field
console.log(user.field); // undefined → looks for a property called "field"

Let’s compare the two reads on the variable field:

• const field = "name" stores the string "name" in a variable.
• user[field] swaps in the value of field, so it reads user["name"] and gives "Alex".
• user.field looks for an actual property literally named field, which does not exist, so it gives undefined.

✏️ Adding, Changing, and Deleting Properties

You can change a property by assigning a new value to it. If the property does not exist yet, JavaScript creates it for you.

const user = {
  name: "Alex",
  age: 28,
};

user.age = 29; // change an existing property
user.email = "alex@example.com"; // add a new property

console.log(user); // { name: "Alex", age: 29, email: "alex@example.com" }

Let’s walk through each assignment:

• user.age = 29 overwrites the existing age property with a new value.
• user.email = "alex@example.com" assigns to a property that does not exist yet, so JavaScript adds it.
• console.log(user) prints the object, now showing the updated age and the new email.

To remove a property, use the delete keyword.

delete user.email;

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

Let’s see what delete does here:

• delete user.email removes the email property from the object entirely.
• console.log(user) prints the object again, and email is gone.

🧱 Objects Can Hold Any Type

A property value can be any type: a string, a number, a boolean, an array, or even another object. This lets you model real things with nested structure.

const product = {
  name: "Wireless Mouse",
  price: 25.99,
  inStock: true,
  tags: ["electronics", "accessories"],
  details: {
    brand: "Acme",
    warranty: "1 year",
  },
};

console.log(product.tags[0]); // "electronics"
console.log(product.details.brand); // "Acme"

Let’s break down the value types and how we reach them:

• name, price, and inStock hold a string, a number, and a boolean.
• tags holds an array, and details holds another object nested inside product.
• product.tags[0] reads the first item of the tags array, which gives "electronics".
• product.details.brand chains dots to reach into the nested object, which gives "Acme".

Here the product object holds a string, a number, a boolean, an array, and a nested object. You reach into the nested values by chaining dots and brackets.

const user = {
  name: "Alex",
};

user.name = "Jordan"; // ✅ allowed — changing a property
console.log(user.name); // "Jordan"

// user = {}; // ❌ error — reassigning the variable is not allowed

Let’s see why one line works and the other does not:

• user.name = "Jordan" changes a property inside the object, which const allows.
• console.log(user.name) confirms the property is now "Jordan".
• user = {} would point user at a brand-new object, which const blocks, so it stays commented out.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ An object stores data as key-value pairs using curly braces {}
• ✅ You read properties with dot notation (user.name) or bracket notation (user["name"])
• ✅ Bracket notation is required when the property name is in a variable
• ✅ You can add, change, and delete properties at any time
• ✅ Property values can be any type, including arrays and other objects
• ✅ A const object can still have its properties changed

🚀 What’s Next?

Now that you can store data in objects, let’s learn how to add behavior to them. Let’s continue to Object Methods.