# Understanding JavaScripts Objects

JavaScript is one of the most popular programming languages used for web development. One of the most important concepts in JavaScript is **Objects**.

Objects help us store related data together in a structured way. In this article, we will understand what objects are, why they are useful, and how to work with them in JavaScript.

* * *

## What Are Objects in JavaScript?

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

Each piece of data has:

*   **Key (property name)**
    
*   **Value (data stored in that property)**
    

Think of an object like a **real-world person**.

Example:

```plaintext
Name: Parth
Age: 21
City: Hyderabad
```

In JavaScript, this can be stored like this:

```plaintext
const person = {
  name: "Parth",
  age: 21,
  city: "Hyderabad"
};
```

Here:

*   `name`, `age`, `city` → keys
    
*   `"Parth"`, `21`, `"Hyderabad"` → values
    

So an object helps us **group related information together**.

* * *

# Why Are Objects Needed?

If we store data separately, it becomes messy.

Example without object:

```plaintext
const name = "Parth";
const age = 21;
const city = "Hyderabad";
```

But these values are related to the **same person**. So objects help us organize them.

Advantages of objects:

*   Organize related data together
    
*   Make code more readable
    
*   Easy to update and manage data
    

* * *

# Creating Objects

Objects are created using **curly braces** `{}`.

Example:

```plaintext
const person = {
  name: "Rahul",
  age: 20,
  city: "Delhi"
};
```

Each property is written as:

```plaintext
key : value
```

Properties are separated using commas.

* * *

# Accessing Object Properties

We can access object properties in **two ways**.

## 1️⃣ Dot Notation

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

Output:

```plaintext
Rahul
20
```

This is the **most common way** to access object properties.

* * *

## 2️⃣ Bracket Notation

```plaintext
console.log(person["city"]);
```

Output:

```plaintext
Delhi
```

Bracket notation is useful when:

*   Property name is dynamic
    
*   Property name has spaces
    

* * *

# Updating Object Properties

We can change the value of a property easily.

Example:

```plaintext
person.age = 21;

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

Output:

```plaintext
21
```

So we simply assign a new value.

* * *

# Adding New Properties

We can also **add new properties** to an object.

Example:

```plaintext
person.country = "India";

console.log(person);
```

Output:

```plaintext
{
  name: "Rahul",
  age: 21,
  city: "Delhi",
  country: "India"
}
```

* * *

# Deleting Properties

To remove a property we use the **delete keyword**.

Example:

```plaintext
delete person.city;

console.log(person);
```

Now the `city` property will be removed.

* * *

# Looping Through Object Keys

To iterate over object properties we use a **for...in loop**.

Example:

```plaintext
const person = {
  name: "Rahul",
  age: 21,
  city: "Delhi"
};

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

Output:

```plaintext
name Rahul
age 21
city Delhi
```

Here:

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

* * *

# Array vs Object

Arrays and objects both store data, but they are used differently.

| Array | Object |
| --- | --- |
| Uses index numbers | Uses keys |
| Ordered collection | Key-value structure |
| Example: `[10, 20, 30]` | Example: `{name: "Rahul"}` |

Example:

```plaintext
const numbers = [10, 20, 30]; // array

const person = { name: "Rahul", age: 21 }; // object
```

Arrays are best for **lists**, while objects are best for **structured data**.

* * *

# Assignment Example: Student Object

Let’s create an object representing a student.

```plaintext
const student = {
  name: "Aman",
  age: 19,
  course: "Computer Science"
};
```

## Update a property

```plaintext
student.age = 20;
```

## Print all keys and values

```plaintext
for (let key in student) {
  console.log(key + ": " + student[key]);
}
```

Output:

```plaintext
name: Aman
age: 20
course: Computer Science
```

* * *

# Visual Representation of an Object

```plaintext
person
 ├── name  → "Rahul"
 ├── age   → 21
 └── city  → "Delhi"
```

Each key points to a value.

* * *

# Conclusion

Objects are one of the most powerful features of JavaScript. They allow us to store related information together using **key-value pairs**.

In this article, we learned:

*   What objects are
    
*   How to create objects
    
*   Accessing properties
    
*   Updating and deleting properties
    
*   Looping through objects
    
*   Difference between arrays and objects
    

Understanding objects is an important step toward mastering JavaScript and building real-world applications.