# Understanding Objects in JavaScript

So far, we have looked at simple primitive data types like `string`, `number`, and `boolean`. These types store a single value at a time:

```javascript
let name = "Rivu";
let age = 21;
let city = "Kolkata";
```

**The Problem:** What if you need to represent a complex entity—like a user, a product, or a student—that has multiple related attributes? Keeping track of separate individual variables gets messy fast.

**The Solution:** An **object**. Objects allow you to group related data and functionality into a single structured container using **key-value pairs**.

## 1\. What is an Object? (Key-Value Pair Structure)

Think of an object as a physical profile card or ID badge:

*   **Key (or Property Name):** The label (e.g., `name`, `age`, `city`).
    
*   **Value:** The actual data associated with that label (e.g., `"Rivu"`, `21`, `"Kolkata"`).
    

```javascript
+------------------------------------------+
|  Object: person                          |
|                                          |
|   Key          Value                     |
|  +----------+  +---------------------+   |
|  | name     |  | "Rivu"            |   |
|  | age      |  | 21                  |   |
|  | city     |  | "Kolkata"           |   |
|  +----------+  +---------------------+   |
+------------------------------------------+
```

## 2\. Array vs. Object: What's the Difference?

Both arrays and objects store collections of data, but they organize and access that data differently:

```javascript
Array (Ordered List - Indexed by Position)
[ 0: "Rivu", 1: 21, 2: "Kolkata" ]

Object (Key-Value Pairs - Accessed by Name)
{ name: "Rivu", age: 21, city: "Kolkata" }
```

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>Array</strong></p></td><td colspan="1" rowspan="1"><p><strong>Object</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Data Structure</strong></p></td><td colspan="1" rowspan="1"><p>Ordered list of items</p></td><td colspan="1" rowspan="1"><p>Unordered collection of key-value pairs</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>How elements are identified</strong></p></td><td colspan="1" rowspan="1"><p>Numeric index (<code>0</code>, <code>1</code>, <code>2</code>)</p></td><td colspan="1" rowspan="1"><p>Custom key names (<code>"name"</code>, <code>"age"</code>)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Best used for</strong></p></td><td colspan="1" rowspan="1"><p>Sequential data (lists of items)</p></td><td colspan="1" rowspan="1"><p>Named entities with properties</p></td></tr></tbody></table>

## 3\. Creating Objects

The most common way to create an object in JavaScript is using **object literal syntax** (`{}`).

```javascript
const person = {
  name: "Rivu",
  age: 21,
  city: "Kolkata",
  isStudent: true
};
```

### 4\. Accessing Properties: Dot vs. Bracket Notation.

You can access property values in two ways:

4.  **Dot Notation (object.property):** This is the standard, most readable approach.
    

```javascript
console.log(person.name); // "Rivu"
console.log(person.city); // "Kolkata"
```

**2\. Bracket Notation (**`object["property"]`**)**

Bracket notation passes the key as a string. It is essential when:

*   The key is stored inside a variable.
    
*   The key contains spaces or special characters (e.g., `"first name"`).
    

```javascript
// Access using string key
console.log(person["age"]); // 21

// Access using a dynamic variable key
const keyToFind = "city";
console.log(person[keyToFind]); // "Kolkata"
```

## 5\. Updating, Adding, and Deleting Properties

Objects in JavaScript are mutable—even when declared with `const`, you can modify their contents.

```javascript
const person = {
  name: "Rivu",
  age: 21
};

// 1. Updating an existing property
person.age = 22;

// 2. Adding a brand new property
person.country = "India";

// 3. Deleting a property using the `delete` keyword
delete person.country;

console.log(person); 
// Output: { name: 'Rivu', age: 22 }
```

## 6\. Looping Through Object Keys

To iterate over all properties of an object, use a `for...in` loop or built-in static methods like `Object.keys()` and `Object.entries()`.

**Method 1:** The `for...in` Loop

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

for (let key in student) {
  // Use bracket notation student[key] to dynamically read values!
  console.log(`${key}: ${student[key]}`);
}
```

Output:

```plaintext
name: Rahul
age: 25
course: Computer Science
```

**Method 2:** `Object.keys()` and `Object.values()`

```javascript
console.log(Object.keys(student));   // ["name", "age", "course"]
console.log(Object.values(student)); // ["Rahul", 25, "Computer Science"]
```

### Here is a complete program demonstrating creation, mutation, and iteration over a student object:

```javascript
// Task 1: Create an object representing a student
const student = {
  name: "Srinivas",
  age: 20,
  course: "Information Technology"
};

// Task 2: Update one property
student.age = 21;

// Task 3: Add a new property
student.grade = "A";

// Task 4: Print all keys and values using a loop
console.log("--- Student Profile ---");

for (let key in student) {
  console.log(`${key.toUpperCase()}: ${student[key]}`);
}
```

Console Output

```plaintext
--- Student Profile ---
NAME: Srinivas
AGE: 21
COURSE: Information Technology
GRADE: A
```