# Understanding Objects in JavaScript

As programs grow, they need a better way to organize information. Storing individual values in separate variables works for small examples, but real applications often deal with **related pieces of data**.

For example, imagine you want to store information about a person:

*   Name
    
*   Age
    
*   City
    

You could create three separate variables, but those values clearly belong together. This is where **objects** become useful.

Objects allow us to group related information into a single structure.

* * *

# What Objects Are and Why They Are Needed

In JavaScript, an **object** is a collection of **key–value pairs**.

Think of it like a labeled record:

*   Each **key** describes a property.
    
*   Each **value** stores the actual information.
    

For example:

```plaintext
name → "Alex"
age → 25
city → "London"
```

An object allows us to store all of these pieces of information together.

Objects are extremely common in JavaScript. They are used to represent things like:

*   Users
    
*   Products
    
*   Orders
    
*   Settings
    
*   Configuration data
    

* * *

# Creating Objects

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

Here is a simple example:

```javascript
const person = {
  name: "Alex",
  age: 25,
  city: "London"
};
```

This object has three properties:

| Key | Value |
| --- | --- |
| name | "Alex" |
| age | 25 |
| city | "London" |

You can think of it as a structured container for related data.

* * *

# Objects vs Arrays

Beginners sometimes confuse arrays and objects, but they serve different purposes.

### Array

Arrays store **ordered lists of values**.

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

Values are accessed using **index numbers**.

```javascript
colors[0] → "red"
```

* * *

### Object

Objects store **labeled values**.

```javascript
const person = {
  name: "Alex",
  age: 25
};
```

Values are accessed using **property names**.

```javascript
person.name → "Alex"
```

In short:

| Structure | Best For |
| --- | --- |
| Array | Ordered lists |
| Object | Structured data |

* * *

# Accessing Object Properties

There are two main ways to access properties inside an object.

* * *

## Dot Notation

This is the most common method.

```javascript
const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

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

Output:

```plaintext
Alex
```

* * *

## Bracket Notation

Another way to access properties is using square brackets.

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

Output:

```plaintext
25
```

Bracket notation is useful when the property name is stored in a variable.

Example:

```javascript
let key = "city";
console.log(person[key]);
```

* * *

# Updating Object Properties

Object values can be modified easily.

Example:

```javascript
const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

person.age = 26;
```

Now the object becomes:

```javascript
{
  name: "Alex",
  age: 26,
  city: "London"
}
```

Updating a property simply means assigning a new value.

* * *

# Adding New Properties

You can add properties to an object at any time.

Example:

```javascript
const person = {
  name: "Alex",
  age: 25
};

person.country = "UK";
```

The object now contains:

```javascript
{
  name: "Alex",
  age: 25,
  country: "UK"
}
```

* * *

# Deleting Properties

If you want to remove a property, you can use the `delete` keyword.

Example:

```javascript
delete person.age;
```

Now the object becomes:

```javascript
{
  name: "Alex",
  country: "UK"
}
```

* * *

# Looping Through Object Keys

Sometimes you want to see **all properties inside an object**.

JavaScript provides a loop called `for...in` for this purpose.

Example:

```javascript
const person = {
  name: "Alex",
  age: 25,
  city: "London"
};

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

Output:

```javascript
name Alex
age 25
city London
```

How this works:

*   `key` represents each property name
    
*   `person[key]` accesses its value
    

This allows us to print all properties dynamically.

* * *

# Assignment

Let’s apply everything you learned.

* * *

## Step 1: Create a Student Object

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

* * *

## Step 2: Update One Property

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

* * *

## Step 3: Print All Keys and Values

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

Output:

```javascript
name John
age 21
course Computer Science
```

* * *

# Complete Assignment Solution

Here is the complete working program:

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

// Update property
student.age = 21;

// Loop through object
for (let key in student) {
  console.log(key + ": " + student[key]);
}
```

Output:

```javascript
name: John
age: 21
course: Computer Science
```

* * *

# Final Thoughts

Objects are one of the most powerful and widely used features in JavaScript. They allow developers to organize related information into structured data.

Instead of managing multiple disconnected variables, objects let you group everything into a single entity. This makes programs easier to read, maintain, and expand.

As you continue learning JavaScript, you will see objects used everywhere—from storing user data to building entire application structures. Understanding how to create and manipulate them is an essential step toward writing more practical and scalable code.