# Understanding Objects in JavaScript (Explained Simply)

When we write programs, we often need to store **many details about one thing**.

Example: A person.

A person can have:

*   name
    
*   age
    
*   city
    
*   job
    

We could store these in separate variables, but that becomes messy.

Example:

```plaintext
let name = "Ravi";
let age = 25;
let city = "Hyderabad";
```

Instead, JavaScript gives us a better way to group related information.

That is called an **Object**.

* * *

# 1\. What is an Object?

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

Think of it like an **ID card**.

```plaintext
Name → Ravi
Age → 25
City → Hyderabad
```

In JavaScript:

```plaintext
let person = {
  name: "Ravi",
  age: 25,
  city: "Hyderabad"
};
```

Here:

*   `name`, `age`, `city` → **keys**
    
*   `"Ravi"`, `25`, `"Hyderabad"` → **values**
    

So an object stores **information about something in an organized way**.

* * *

# 2\. Creating an Object

We create objects using **curly braces** `{}`.

Example:

```plaintext
let person = {
  name: "Arjun",
  age: 22,
  city: "Delhi"
};
```

This object contains **three properties**.

You can print the entire object:

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

Output:

```plaintext
{ name: "Arjun", age: 22, city: "Delhi" }
```

* * *

# 3\. Accessing Object Properties

We can access values in two ways:

1️⃣ Dot Notation  
2️⃣ Bracket Notation

* * *

## Dot Notation

Example:

```plaintext
let person = {
  name: "Arjun",
  age: 22,
  city: "Delhi"
};

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

Output:

```plaintext
Arjun
```

Here we accessed the **name property**.

* * *

## Bracket Notation

Example:

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

Output:

```plaintext
22
```

Bracket notation is useful when the key is stored in a variable.

Example:

```plaintext
let key = "city";

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

Output:

```plaintext
Delhi
```

* * *

# 4\. Updating Object Properties

We can **change values inside an object**.

Example:

```plaintext
let person = {
  name: "Arjun",
  age: 22,
  city: "Delhi"
};

person.age = 23;

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

Output:

```plaintext
23
```

The value changed from **22 → 23**.

* * *

# 5\. Adding New Properties

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

Example:

```plaintext
let person = {
  name: "Arjun",
  age: 22
};

person.city = "Hyderabad";

console.log(person);
```

Output:

```plaintext
{ name: "Arjun", age: 22, city: "Hyderabad" }
```

A new property **city** was added.

* * *

# 6\. Deleting Properties

We can remove properties using the **delete keyword**.

Example:

```plaintext
let person = {
  name: "Arjun",
  age: 22,
  city: "Hyderabad"
};

delete person.city;

console.log(person);
```

Output:

```plaintext
{ name: "Arjun", age: 22 }
```

The **city property was removed**.

* * *

# 7\. Looping Through Object Keys

Sometimes we want to **print all properties of an object**.

We can use a **for...in loop**.

Example:

```plaintext
let person = {
  name: "Arjun",
  age: 22,
  city: "Hyderabad"
};

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

Output:

```plaintext
name Arjun
age 22
city Hyderabad
```

Here:

*   `key` → property name
    
*   `person[key]` → value
    

* * *

# Object vs Array (Important Difference)

Arrays and objects both store data, but they work differently.

### Array

Array stores **values using index numbers**.

Example:

```plaintext
let fruits = ["apple", "banana", "mango"];
```

Access using index:

```plaintext
fruits[0]
```

* * *

### Object

Object stores **values using keys**.

Example:

```plaintext
let person = {
  name: "Ravi",
  age: 25
};
```

Access using key:

```plaintext
person.name
```

* * *

### Simple Comparison

| Feature | Array | Object |
| --- | --- | --- |
| Data Access | Index | Key |
| Structure | Ordered list | Key-value pairs |
| Example | fruits | person details |

* * *

# Visual Representation of an Object

```plaintext
person
│
├── name → Ravi
├── age → 25
└── city → Hyderabad
```

Each key is connected to a value.

* * *

# Assignment Practice

Try this in your browser console.

* * *

# 1\. Create a Student Object

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

* * *

# 2\. Update One Property

```plaintext
student.age = 22;

console.log(student);
```

Output:

```plaintext
{ name: "Rahul", age: 22, course: "Computer Science" }
```

* * *

# 3\. Print All Keys and Values

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

Output:

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