# Understanding Objects in JavaScript

When you start learning JavaScript, you quickly realize that storing simple values like numbers and strings is easy. But what if you want to represent something more complex — like a **person, a student, or a product**?

That’s where **objects** come in.

Objects allow us to store multiple related pieces of information together in a structured way. They are one of the most important building blocks in JavaScript and are used everywhere in real applications.

In this article, we will learn:

*   What objects are and why they are useful
    
*   How to create objects
    
*   How to access object properties
    
*   How to update, add, and delete properties
    
*   How to loop through object keys
    
*   The difference between arrays and objects
    

Let's start with the basics.

# What Are Objects in JavaScript?

An **object** is a collection of **key-value pairs**.

Each piece of information in an object has:

*   a **key** (also called a property name)
    
*   a **value**
    

Think of it like a **dictionary or a contact card**.

Example of a person:

```plaintext
Name: Rith
Age: 22
City: Kolkata
```

In JavaScript, this can be represented as an object:

```javascript
const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};
```

Here:

| Key | Value |
| --- | --- |
| name | "Rith" |
| age | 22 |
| city | "Kolkata" |

So the structure becomes:

```plaintext
key : value
```

Objects help us group **related data together**, which makes our code easier to manage.

# Creating Objects in JavaScript

The most common way to create an object is using **curly braces** `{}`.

### Example

```javascript
const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};
```

In this example:

*   `person` is the object
    
*   `name`, `age`, and `city` are properties
    
*   `"Rith"`, `22`, and `"Kolkata"` are values
    

You can store different types of values inside an object:

```javascript
const user = {
  username: "rith_dev",
  age: 22,
  isDeveloper: true
};
```

Objects are very flexible and can store almost any kind of data.

# Accessing Object Properties

Once we create an object, we need ways to **access the stored data**.

JavaScript provides **two ways** to access object properties.

## Dot Notation

This is the **most common method**.

Syntax:

```plaintext
object.property
```

Example:

```javascript
const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

console.log(person.name);
```

Output:

```plaintext
Rith
```

## Bracket Notation

Another way is **bracket notation**.

Syntax:

```plaintext
object["property"]
```

Example:

```javascript
console.log(person["age"]);
```

Output:

```plaintext
22
```

Bracket notation is useful when:

*   property names are stored in variables
    
*   property names contain spaces
    

Example:

```javascript
const key = "city";

console.log(person[key]);
```

Output:

```plaintext
Kolkata
```

# Updating Object Properties

Objects are **mutable**, which means their values can be changed.

To update a property, simply assign a new value.

Example:

```javascript
person.age = 23;
```

Now the object becomes:

```javascript
{
  name: "Rith",
  age: 23,
  city: "Kolkata"
}
```

You can also update using bracket notation:

```javascript
person["city"] = "Delhi";
```

# Adding and Deleting Properties

Objects can also grow or shrink during runtime.

## Adding Properties

You can add a new property simply by assigning it.

Example:

```javascript
person.job = "Developer";
```

Now the object becomes:

```javascript
{
  name: "Rith",
  age: 23,
  city: "Delhi",
  job: "Developer"
}
```

## Deleting Properties

JavaScript provides the `delete` keyword.

Example:

```javascript
delete person.city;
```

Now the object becomes:

```javascript
{
  name: "Rith",
  age: 23,
  job: "Developer"
}
```

# Looping Through Object Keys

Sometimes we need to go through every property in an object.

JavaScript provides the `for...in` **loop** for this.

Example:

```javascript
const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};

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

Output:

```plaintext
name Rith
age 22
city Kolkata
```

Here:

*   `key` represents the property name
    
*   `person[key]` gives the value
    

# Difference Between Arrays and Objects

Beginners often confuse arrays and objects.

Both store multiple values, but they work differently.

### Array Example

```javascript
const fruits = ["apple", "banana", "mango"];
```

Arrays store values using **index numbers**.

```plaintext
0 → apple
1 → banana
2 → mango
```

Access example:

```javascript
fruits[0]
```

### Object Example

```javascript
const person = {
  name: "Rith",
  age: 22,
  city: "Kolkata"
};
```

Objects store values using **keys instead of indexes**.

```plaintext
name → Rith
age → 22
city → Kolkata
```

Access example:

```javascript
person.name
```

# Assignment Example: Student Object

Let's create a simple **student object**.

```javascript
const student = {
  name: "Rahul",
  age: 21,
  course: "Computer Science"
};
```

## Updating a Property

```javascript
student.age = 22;
```

## Adding a Property

```javascript
student.city = "Mumbai";
```

## Printing All Keys and Values

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

Output might look like:

```plaintext
name Rahul
age 22
course Computer Science
city Mumbai
```

This simple example shows how objects can represent real-world data.

# Visualizing an Object Structure

You can imagine an object like this:

```plaintext
person
 ├── name → "Rith"
 ├── age → 22
 └── city → "Kolkata"
```

Each **key points to a value**, forming a structured data container.

# Conclusion

Objects are one of the most powerful features in JavaScript. They allow developers to represent real-world entities like users, products, and students using structured key-value pairs.

In this article we learned:

*   What objects are
    
*   How to create objects
    
*   How to access properties
    
*   How to update, add, and delete properties
    
*   How to loop through object keys
    
*   The difference between arrays and objects
    

Understanding objects is essential because they are used everywhere in JavaScript applications, especially when working with APIs, databases, and complex data structures.

Once you are comfortable with objects, you will find it much easier to build structured and scalable applications.