# Understanding Objects in JavaScript

JavaScript provides several data structures to organize data. One of the most powerful and commonly used structures is the **object**.

Objects allow us to store related data together in a structured way using **key–value pairs**.

In this article, we will learn:

*   What objects are and why they are needed
    
*   How to create objects
    
*   How to access properties
    
*   How to update properties
    
*   How to add and delete properties
    
*   How to loop through object keys
    

## What Are Objects in JavaScript?

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

Each value is associated with a **key (property name)**.

### Structure

```shell
key: value
```

Example:

```javascript
let person = {
  name: "John",
  age: 25,
  city: "New York"
};
```

Here:

| Key | Value |
| --- | --- |
| name | "John" |
| age | 25 |
| city | "New York" |

So the object `person` stores information about a person.

# Why Are Objects Needed?

Objects help us **group related information together**.

Imagine storing information about a person without objects:

```javascript
let name = "John";
let age = 25;
let city = "New York";
```

These variables are **not connected**.

Using an object makes the relationship clear:

```javascript
let person = {
  name: "John",
  age: 25,
  city: "New York"
};
```

Now all information belongs to **one entity: the person**.

# Objects vs Arrays

Both objects and arrays store multiple values, but they work differently.

| Feature | Array | Object |
| --- | --- | --- |
| Data structure | Ordered list | Key-value pairs |
| Access method | Index | Property name |
| Example | `arr[0]` | `obj.name` |

### Array Example

```javascript
let colors = ["red", "blue", "green"];

console.log(colors[0]); 
```

Output

```shell
red
```

### Object Example

```javascript
let person = {
  name: "John",
  age: 25
};

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

Output

```shell
John
```

### Creating Objects

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

### Example

```javascript
let person = {
  name: "Alice",
  age: 22,
  city: "London"
};

console.log(person);
```

Output

```javascript
{ name: 'Alice', age: 22, city: 'London' }
```

Each property is written as:

```shell
key: value
```

## Accessing Object Properties

### There are **two ways** to access object properties.

## 1\. Dot Notation

This is the **most common method**.

```javascript
let person = {
  name: "Alice",
  age: 22
};

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

Output

```shell
Alice
```

## 2\. Bracket Notation

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

```javascript
let person = {
  name: "Alice",
  age: 22
};

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

Output

```shell
22
```

### Using Variables

```javascript
let key = "name";

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

Output

```shell
Alice
```

## Updating Object Properties

### You can change a property value using **assignment**.

```javascript
let person = {
  name: "Alice",
  age: 22
};

person.age = 23;

console.log(person);
```

Output

```shell
{ name: 'Alice', age: 23 }
```

## Adding New Properties

New properties can be added simply by assigning a value.

```javascript
let person = {
  name: "Alice",
  age: 22
};

person.city = "London";

console.log(person);
```

Output

```shell
{ name: 'Alice', age: 22, city: 'London' }
```

## Deleting Properties

The `delete` keyword removes a property from an object.

```javascript
let person = {
  name: "Alice",
  age: 22,
  city: "London"
};

delete person.city;

console.log(person);
```

Output

```shell
{ name: 'Alice', age: 22 }
```

## Looping Through Object Keys

To iterate through object properties, we use the **for...in loop**.

### Example

```javascript
let person = {
  name: "Alice",
  age: 22,
  city: "London"
};

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

Output

```shell
name Alice
age 22
city London
```

Explanation:

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

## Mind Map -

![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/b62d2f68-13e1-4715-9679-39e5521c3e1a.png align="center")

## Assignment: Student Object

Let's create an object representing a student.

### Step 1: Create the Object

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

### Step 2: Update a Property

```javascript
student.age = 21;
```

### Step 3: Print All Keys and Values

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

Output

```shell
name: Rahul
age: 21
course: Computer Science
```