Understanding Objects in JavaScript: A Beginner-Friendly Guide

In the previous articles, we explored Arrays and Array Methods in JavaScript and learned how methods like map(), filter(), and reduce() help us work with arrays more efficiently.

We saw that arrays are extremely useful when we want to store a list of values.

For example:

const numbers = [10, 20, 30, 40];

Here, the array simply stores a collection of numbers.

But in many real-world situations, we need to store structured information about something.

For example, imagine we want to store information about a person:

• name

• age

• city

If we tried storing this using an array, it might look like this:

const person = ["Chirag", 20, "Jodhpur"];

This works fine, but there is a problem.

Looking at this array person, it is not immediately clear what each value represents.

person[0] // name
person[1] // age
person[2] // city

We have to remember the position of each value, which can quickly become confusing as programs grow larger.

So the natural question becomes:

Is there a better way to store structured data where each value has a clear meaning?

And the answer is yes.

JavaScript provides a powerful data structure called objects for storing structured data. Objects allow us to label our data using meaningful keys instead of relying on positions like arrays.

---

In this article, we will explore:

• What objects are and why they are useful

• How to create objects in JavaScript

• How to access object properties

• How to update, add, and delete properties

• How to loop through object keys

By the end of this article, you will understand how objects help us organize and work with structured data in JavaScript.

---

What Are Objects in JavaScript?

In the introduction, we saw that arrays are useful when we want to store a list of values.

However, many real-world situations require us to store structured information about something.

For example, imagine we want to store information about a person:

• name

• age

• city

Instead of storing these values in an array, JavaScript allows us to store them using an object.

An object is a data structure that stores information in the form of key–value pairs.

Where a key describes the property, and the value stores the actual data.

Let's look at a simple example:

const person = {
  name: "Chirag",
  age: 20,
  city: "Jodhpur"
};

Here:

• name, age, and city are keys

• "Chirag", 20, and "Jodhpur" are values

Each key is connected to a value using a colon (:).

As you can observe, the data becomes much clearer now because each value is connected to a descriptive key.

---

Objects are widely used in JavaScript because they allow us to represent real-world entities such as:

• a user

• a product

• a student

• a configuration

In simple terms:

An object allows us to store related information together using key–value pairs.

Now that we understand what objects are and why they are useful, the next step is to learn how to create objects in JavaScript.

Let’s explore that in the next section.

---

Creating Objects in JavaScript

The most common way to create an object is by using object literal syntax.

An object is created using curly braces {}, and inside those braces we define key–value pairs.

The basic structure looks like this:

const objectName = {
  key1: value1,
  key2: value2
};

Here:

• objectName is the name of the object

• key1 and key2 represent the property names

• value1 and value2 represent the data stored in those properties

Each key–value pair is separated by a comma.

Example:

Let’s create an object that stores information about a person.

const person = {
  name: "Chirag",
  age: 20,
  city: "Jodhpur"
};

In this example:

• name, age, and city are keys

• "Chirag", 20, and "Jodhpur" are the values associated with those keys

So the object stores three pieces of information about the person.

---

Creating an Empty Object

Sometimes we may want to create an object first and add properties later.

We can create an empty object like this:

const student = {};

At this point, the object does not contain any properties and later we can add information to it.

Example:

const student = {};

student.name = "Rahul";
student.age = 19;
student.course = "Computer Science";

console.log(student);

Output:

{ name: "Rahul", age: 19, course: "Computer Science" }

Here we first created an empty object, and then added properties to it.

Objects are very flexible because we can create them with properties initially or add properties later when needed.

---

Accessing Object Properties

Now that we know how to create objects, the next step is learning how to access the values stored inside them.

JavaScript provides two common ways to access object properties:

• Dot notation

• Bracket notation

Let’s understand each of them one by one.

---

1️⃣ Dot Notation

The most common way to access a property of an object is by using dot notation.

The syntax looks like this:

objectName.key

Here:

• objectName is the object we want to access

• key is the name of the property

Example:

Consider the following object:

const person = {
  name: "Chirag",
  age: 20,
  city: "Jodhpur"
};

We can access the values using dot notation.

console.log(person.name);
console.log(person.age);
console.log(person.city);

Output:

Chirag
20
Jodhpur

What Happened Here?

When we write:

person.name

JavaScript looks inside the person object and returns the value associated with the key name.

Similarly:

person.age
person.city

return the values 20 and "Jodhpur" respectively.

Note: Dot notation is the most commonly used way to access object properties because it is simple and easy to read.

---

2️⃣ Bracket Notation

Another way to access properties of an object is by using bracket notation.

The syntax looks like this:

objectName["key"]

Here:

• objectName is the object we want to access

• "key" is the name of the property written inside quotes

Example:

Let’s use the same person object from earlier.

const person = {
  name: "Chirag",
  age: 20,
  city: "Jodhpur"
};

Now we can access its properties using bracket notation.

console.log(person["name"]);
console.log(person["age"]);
console.log(person["city"]);

Output:

Chirag
20
Jodhpur

As you can see, this gives us the same result as dot notation.

---

When is Bracket Notation Useful?

Bracket notation becomes useful in situations where the property name is stored in a variable.

For example:

const person = {
  name: "Chirag",
  age: 20,
  city: "Jodhpur"
};

const key = "name";

console.log(person[key]);

Output:

Chirag

Here, the value of key is "name", so JavaScript retrieves the corresponding property from the object.

Note: This would not work with dot notation because dot notation expects a fixed property name.

If you try accessing it using dot notation, JavaScript will return undefined.

console.log(person.key)

Output:

undefined

---

Quick Comparison

Method	Example	When to Use
Dot Notation	person.name	Most common and easiest to read
Bracket Notation	person["name"]	Useful when property name comes from a variable

---

Now that we know how to access object properties, the next step is learning how to update and delete existing properties and add new ones to an object.

Let’s explore that in the next section.

---

Updating Object Properties

Once an object is created, we can change the value of its existing properties whenever needed.

To update a property, we simply assign a new value to the key.

Example:

Consider the following object:

const student = {
  name: "Rahul",
  age: 19,
  course: "Computer Science"
};

Suppose we want to update the student's age. We can do it in this manner:

student.age = 20;

console.log(student);

Output:

{ name: "Rahul", age: 20, course: "Computer Science" }

What Happened Here?

Originally the value of age was 19.

When we wrote:

student.age = 20;

JavaScript updated the existing value of the age property.

---

Adding New Properties to an Object

Objects in JavaScript are dynamic, which means we can add new properties even after the object has been created.

To add a property, we simply assign a value to a new key.

Example:

In our student object, we can add a new property like this:

student.city = "Delhi";

console.log(student);

Output:

{
  name: "Rahul",
  age: 20,
  course: "Computer Science",
  city: "Delhi"
}

Here, the city property did not exist before, but JavaScript automatically added it to the object.

---

Deleting Object Properties

Sometimes we may want to remove a property from an object. So, JavaScript provides the delete operator for this purpose.

Example:

In our student object, we can delete properties in this manner:

delete student.course;

console.log(student);

Output:

{ name: "Rahul", age: 20, city: "Delhi" }

What Happened Here?

The statement:

delete student.course;

removed the course property from the object.

So the object now contains only:

• name

• age

• city

---

Summary of Object Modifications

Operation	Example
Update property	student.age = 20
Add new property	student.city = "Delhi"
Delete property	delete student.course

These operations make objects very flexible, allowing us to modify data whenever needed.

---

Now that we know how to create, access, update, add, and delete properties, the next step is learning how to loop through the keys of an object.

This is especially useful when we want to print all properties of an object dynamically.

---

Looping Through Object Keys

So far, we have learned how to create objects, access their properties, and update them.

But sometimes we may want to access all the properties of an object automatically, especially when the object contains many keys.

For example, suppose we have the following object:

const student = {
  name: "Rahul",
  age: 20,
  course: "Computer Science",
  city: "Delhi"
};

Now imagine we want to print all the properties of this object.

So writing each property manually like this would work:

console.log(student.name);
console.log(student.age);
console.log(student.course);
console.log(student.city);

But this approach becomes inconvenient when the object contains many properties.

To solve this problem, JavaScript provides a loop called the for...in loop, which allows us to iterate over the keys of an object.

Syntax

A basic for...in loop looks like this:

for (let key in objectName) {
  // code to execute
}

Here:

• key represents each property name

• objectName is the object we want to iterate over

Example:

Let’s use the for...in loop to print the keys of the student object.

for (let key in student) {
  console.log(key);
}

Output:

name
age
course
city

As you can see, the loop printed all the keys of the object.

---

Accessing Both Keys and Values

In most cases, we want to print both the key and its corresponding value. We can do this by using bracket notation.

for (let key in student) {
  console.log(key, student[key]);
}

Output:

name Rahul
age 20
course Computer Science
city Delhi

What Happened Here?

Let’s understand what happens during each iteration.

Iteration	Value of key	student[key]	Output
1	name	Rahul	name Rahul
2	age	20	age 20
3	course	Computer Science	course Computer Science
4	city	Delhi	city Delhi

During each iteration:

• key stores the property name

• student[key] retrieves the value associated with that key.

---

Important Thing to Remember

The for...in loop is mainly used to iterate over object properties.

Earlier in the series, we saw that:

• for...of is commonly used for arrays

• for...in is commonly used for objects

---

Practice Time

Now that we have learned the basics of JavaScript objects, let’s practice a few examples to strengthen our understanding.

Try running these examples in your browser console and experiment by modifying the values.

1. Create a Student Object

Create an object that stores information about a student.

const student = {
  name: "Amit",
  age: 21,
  course: "Computer Science"
};

console.log(student);

2. Access Object Properties

Use dot notation to access the properties of the object.

console.log(student.name);
console.log(student.age);
console.log(student.course);

3. Update a Property

Now update the student's age.

student.age = 22;

console.log(student);

4. Add a New Property

Let’s add a new property called city.

student.city = "Delhi";

console.log(student);

5. Print All Keys and Values Using a Loop

Now use a for...in loop to print all keys and values of the object.

for (let key in student) {
  console.log(key, student[key]);
}

Try modifying the values, adding new properties, or removing existing ones to see how objects behave.

Practicing small examples like these is one of the best ways to understand how objects work in JavaScript.

---

Wrapping Up

In this article, we explored the basics of objects in JavaScript.

We learned:

• What objects are and why they are useful

• How to create objects

• How to access properties using dot notation and bracket notation

• How to update, add, and delete properties

• How to loop through object keys using the for...in loop

Objects allow us to store and organize structured data using key–value pairs, making our programs easier to understand and manage.

---

What's Next?

So far in this series, we have covered several Basic JavaScript Topics.

In the next article, we will explore Object-Oriented Programming (OOP) in JavaScript and learn how objects help us structure and organize our programs more effectively.

---

⬅ Previous Article: Array Methods in JavaScript

➡ Next Article: Object-Oriented Programming in JavaScript