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

const person = {
  
};

Step 2: Add properties (key: value pairs)

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

Step 3: Use it

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):

const person = { name: 'John', age: 25 };
person.name;  // "John"
person.age;   // 25

Bracket notation (when you need it):

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:

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:

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:

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:

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:

const userName = 'John';
const userAge = 25;
const userEmail = 'john@example.com';

With objects, it's organized:

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.