Understanding Objects in JavaScript

What Are Objects in JavaScript and Why Do We Need Them?

When we first learn JavaScript, we usually store information using variables.

For example:

let name = "Yashika";
let age = 24;
let city = "Gwalior";

This works perfectly fine when we’re dealing with just a few values.

But imagine you’re building a program that stores information about a person. A person might have many details like: name, age, city, email, phone number etc.

If we store each piece of information separately, the code might start looking like this:

let personName = "Rahul";
let personAge = 22;
let personCity = "Delhi";
let personEmail = "rahul@email.com";

This approach works, but as the amount of data grows, it becomes harder to manage.

Now imagine you need to store 100 users like this. Things would quickly get messy.

This is exactly the problem objects solve.

Objects allow us to group related information together in one place.

Instead of storing separate variables, we can store everything inside a single object.

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi",
  email: "rahul@email.com"
};

Now all the information about the person lives inside one structure called an object.

You can think of an object like a profile card or a form where each piece of information has a label and a value.

Name  → Rahul
Age   → 22
City  → Delhi
Email → rahul@email.com

In JavaScript, these labels are called keys, and the information stored inside them are called values.

So an object is simply a collection of key–value pairs.

Objects are extremely important in JavaScript because they allow us to represent real-world data in a structured way.

Whenever we need to represent something like, user, product, student , car , we usually use objects.

And once you get comfortable with objects, you'll start noticing that most real-world JavaScript applications rely heavily on them.

Creating objects

Now that we understand what objects are and why they are useful, let’s see how we can actually create objects in JavaScript.

Objects are created using curly braces {}.

Inside these braces, we store data as key–value pairs. Esch key value pair is separated by commas.

Basic syntax:

let objectName = {
  key: value,
  key: value
};

Let’s create a simple example representing a person.

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Accessing Object Properties

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

JavaScript provides two ways to access object properties:

1. Dot notation

2. Bracket notation

Let’s start with the most common one.

Using Dot Notation

Dot notation is the simplest and most commonly used way to access values in an object.

Syntax:

objectName.propertyName

Let’s use the person object as an example.

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Now suppose we want to access the person's name.

console.log(person.name); //Rahul

Similarly, we can access other properties.

console.log(person.age); //22
console.log(person.city); //Delhi

Think of dot notation like asking the object for a specific detail.

person.name

means:

“Hey person object, give me the value stored under the key name.”

Using Bracket Notation

JavaScript also allows us to access properties using square brackets [].

Syntax:

objectName["propertyName"]

Using the same object as an example:

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

We can access the properties like this:

console.log(person["name"]); //Rahul
console.log(person["age"]); //22

When Do We Use Bracket Notation?

Bracket notation becomes useful when the property name is stored inside a variable, or if there is a property name with space between it. Ex: age of person

Example:

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

let key = "name";

console.log(person[key]); //Rahul

Here JavaScript reads the variable key, which contains "name".

If we tried this with dot notation:

person.key

JavaScript would look for a property literally called "key", which doesn’t exist.
If there is property name called age of person we cannot access it like person.age.

That’s why bracket notation is helpful in situations where property names are dynamic and if there is space in property name.

Updating object properties

Now that we know how to access values inside an object, the next step is learning how to update existing properties or modify the data stored inside an object.

Objects in JavaScript are not fixed. One of the useful things about objects is that we can update their values whenever needed.

Updating a property simply means changing the value associated with a key.

We can update object properties using the same methods we used to access them: dot notation and bracket notation.

Updating Properties Using Dot Notation

Let’s start with a simple object.

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Suppose Rahul moves to another city. We need to update the city value.

person.city = "Mumbai";

Now if we print the object:

console.log(person.city); //Mumbai

Updating Properties Using Bracket Notation

Just like accessing properties, we can also update them using bracket notation.

person["age"] = 23;

console.log(person.age); //23

Both methods work exactly the same. The only difference is the syntax.

Adding and deleting properties

1. Adding Properties

Adding a new property is actually very simple. We just assign a value to a new key that doesn’t exist yet.

Example:

let student = {
  name: "Aman",
  age: 20
};

Now suppose we want to add the student's course.

student.course = "Computer Science";

If we print the object now:

console.log(student);

Output:

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

We can also add properties using bracket notation.

Example:

student["city"] = "Delhi";

Now the object becomes:

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

2. Deleting Properties

Sometimes we may want to remove a property that is no longer needed.

JavaScript provides the delete keyword for this.

delete student.city;

If we print the object again:

console.log(student);

Output:

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

The city property has been removed.

Looping Through Object Keys

Sometimes we don’t know the exact property names beforehand, and we want to go through every property inside an object.

For example, imagine we have an object representing a student:

let student = {
  name: "Aman",
  age: 20,
  course: "Computer Science"
};

If we want to print every property manually, we could do this:

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

This works, but it becomes inefficient when the object contains many properties.

Instead, JavaScript allows us to loop through object keys.

Using the for...in Loop

JavaScript provides a special loop called for...in to iterate over object properties.

Syntax:

for (let key in objectName) {
  // code here
}

Let’s use it with our student object.

let student = {
  name: "Aman",
  age: 20,
  course: "Computer Science"
};

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

Output:

name
age
course

The loop goes through each key in the object.

Accessing Both Keys and Values

Usually we want to see both the key and its value.

We can do that like this:

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

Output:

name Aman
age 20
course Computer Science

Here’s what’s happening:

• key represents the property name

• student[key] gives the value stored in that property

Wrapping Up

Objects are one of the most powerful and commonly used features in JavaScript. They allow us to organize related information together in a structured way, making our code easier to read and manage.

In this guide, we explored the core concepts of working with objects step by step.

We learned:

• What objects are and why they are useful

• How to create objects using curly braces {}

• How to access properties using dot notation and bracket notation

• How to update existing values in an object

• How to add or delete properties dynamically

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

Objects are used everywhere in JavaScript applications. Whether you're working with user data, product details, configuration settings, or API responses, you'll frequently encounter objects.

The more you practice creating and manipulating objects, the more comfortable you'll become with structuring data in JavaScript.

And once objects start feeling natural, you'll find it much easier to understand many advanced JavaScript concepts that build on top of them.