# Understanding Objects in JavaScript

## Introduction

If you've written any JavaScript, you've probably used an array to store a list of values. Arrays are great for ordered data. But what if you need to describe something, not just list things?

That's where objects come in.

* * *

## What is an Object?

An object in JavaScript is a collection of key-value pairs. Each key is a string (called a property), and each value can be anything: a number, a string, a boolean, even another object or a function.

Think of it like a contact card. A contact card doesn't just hold a list, it holds labeled information: a name, a phone number, a city. That labeled structure is exactly what an object gives you.

Here's the difference made concrete:

```javascript
// An array: ordered, but no labels
const person = ["Alice", 30, "Mumbai"];

// An object: labeled, descriptive
const person = {
    name: "Alice",
    age: 30,
    city: "Mumbai"
};
```

With the array, you have to remember that index 0 is the name and index 2 is the city. With the object, the data explains itself.

* * *

## Creating an Object

The most common way to create an object is with curly braces, also called object literal syntax.

```javascript
const person = {
    name: "Alice",
    age: 30,
    city: "Mumbai"
};
```

Each line inside is a property. The key is on the left, the value is on the right, and they're separated by a colon. Properties are separated by commas.

You can also create an empty object and add properties later:

```javascript
const person = {};
person.name = "Alice";
person.age = 30;
```

Both approaches are valid. Object literals are more common when you know the data upfront.

* * *

## Accessing Properties

There are two ways to read a property from an object.

### Dot Notation

```javascript
console.log(person.name); // "Alice"
console.log(person.age);  // 30
```

This is the standard way. Clean, readable, and works most of the time.

### Bracket Notation

```javascript
console.log(person["name"]); // "Alice"
console.log(person["city"]); // "Mumbai"
```

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

```javascript
const key = "age";
console.log(person[key]); // 30
```

You can't do that with dot notation. `person.key` would look for a property literally named "key", not the value stored in the variable.

* * *

## Updating Properties

To change a property's value, just reassign it:

```javascript
person.age = 31;
console.log(person.age); // 31
```

Works the same way with bracket notation:

```javascript
person["city"] = "Pune";
console.log(person.city); // "Pune"
```

There's nothing special about updating vs. setting. If the property exists, the value gets replaced. If it doesn't exist, the property gets created.

* * *

## Adding and Deleting Properties

You can add new properties to an object at any time, even after it's been created:

```javascript
person.email = "alice@example.com";
console.log(person.email); // "alice@example.com"
```

To remove a property, use the `delete` keyword:

```javascript
delete person.city;
console.log(person.city); // undefined
```

After deletion, accessing that property returns `undefined`. The key is gone.

* * *

## Looping Through an Object

If you want to go through all the properties in an object, `for...in` is the most direct way:

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

// name : Alice
// age : 31
// email : alice@example.com
```

On each iteration, `key` holds the property name as a string. `person[key]` gives you the value for that property. Notice bracket notation here; dot notation won't work because `key` is a variable.

You can also use `Object.keys()`, `Object.values()`, and `Object.entries()` if you want to work with the keys or values as arrays:

```javascript
console.log(Object.keys(person));
// ["name", "age", "email"]

console.log(Object.values(person));
// ["Alice", 31, "alice@example.com"]

Object.entries(person).forEach(([key, value]) => {
    console.log(key, ": ", value);
});
```

`Object.entries()` is particularly handy when you need both the key and value together without the `for...in` syntax.

* * *

## Putting It Together

Here's everything applied to one object:

```javascript
const person = {
    name: "Alice",
    age: 30,
    city: "Mumbai"
};

// Access
console.log(person.name);       // "Alice"
console.log(person["city"]);    // "Mumbai"

// Update
person.age = 31;

// Add
person.email = "alice@example.com";

// Delete
delete person.city;

// Loop
for (let key in person) {
    console.log(key + ": " + person[key]);
}

// name: Alice
// age: 31
// email: alice@example.com
```

* * *

## Conclusion

Objects are one of the most-used structures in JavaScript. Once you're comfortable with creating, reading, updating, and looping through them, a lot of JavaScript code starts making more sense because objects show up everywhere: in API responses, in function arguments, in component state, and more.