JavaScript Objects

What's an Object?

An object is like a filing cabinet. You have different drawers (properties) that hold different pieces of information, all related to one thing.

Think of a person:

``` ┌─────────────────────┐ │ Person Object │ │ │ │ Name: "John" │ ← Property │ Age: 25 │ ← Property │ Email: "john@..." │ ← Property │ City: "NYC" │ ← Property └─────────────────────┘ ```

Instead of having separate variables for each piece of information, you group them together in an object.

Creating an Object

Let's create an object step by step:

**Step 1:** Start with curly braces ```javascript const person = { }; ```

**Step 2:** Add properties (key: value pairs) ```javascript const person = { name: 'John', age: 25 }; ```

**Step 3:** Use it ```javascript console.log(person.name); // "John" console.log(person.age); // 25 ```

Each property has a name (the key) and a value. You separate them with a colon, and separate properties with commas.

Getting Information from Objects

There are two ways to get information from an object:

**Dot notation (most common):** ```javascript const person = { name: 'John', age: 25 }; person.name; // "John" person.age; // 25 ```

**Bracket notation (when you need it):** ```javascript person['name']; // "John" person['age']; // 25 ```

Most of the time, you'll use dot notation. It's shorter and easier to read.

Adding New Information

You can add new properties anytime:

```javascript const person = { name: 'John' };

person.age = 25; person.email = 'john@example.com'; person.city = 'New York'; ```

Now the person object has all this information.

Changing Information

You can also change existing properties:

```javascript const person = { name: 'John', age: 25 };

person.age = 26; // Changed from 25 to 26 ```

Objects with Functions (Methods)

Objects can also contain functions. When a function is inside an object, it's called a method:

```javascript const person = { name: 'John', age: 25, greet: function() { return 'Hi, I am ' + this.name; } };

person.greet(); // "Hi, I am John" ```

The `this` keyword refers to the object itself. So `this.name` means "the name property of this object."

Real Example: User Profile

Let's say you're building a user profile system:

```javascript const user = { firstName: 'John', lastName: 'Doe', email: 'john@example.com', age: 25, isActive: true, getFullName: function() { return this.firstName + ' ' + this.lastName; } };

console.log(user.getFullName()); // "John Doe" console.log(user.email); // "john@example.com" ```

All the user's information is grouped together in one object. Easy to access, easy to manage.

Why Objects Are Useful

Without objects, you'd have separate variables: ```javascript const userName = 'John'; const userAge = 25; const userEmail = 'john@example.com'; ```

With objects, it's organized: ```javascript const user = { name: 'John', age: 25, email: 'john@example.com' }; ```

Objects keep related information together. When you pass an object to a function, you're passing all that information at once.

Quick Tips

1. **Use objects to group related data** - Like a person's info, a product's details, etc. 2. **Property names don't need quotes** - Unless they have spaces or special characters 3. **Access with dot notation** - `object.property` is the most common way 4. **Methods are just functions** - Inside objects, they're called methods

Objects are everywhere in JavaScript. Once you understand them, you'll see them used constantly.