🎁

Objects

🎉
💨
Objects are like ID cards - they hold related info together!

What are Objects?

An object stores related data as key-value pairs. Think of it like a form with labels and values - Name: Alice, Age: 25.

Objects help you organize data that belongs together, like all the info about a person or a product.

💡
💨

Creating Objects

Use curly braces { } to create objects:

1const person = {
2  name: "Alice",
3  age: 25,
4  city: "New York"
5};
6
7// Keys (properties): name, age, city
8// Values: "Alice", 25, "New York"
🤔
💨

Accessing Properties

Two ways to get values from an object:

1const person = {
2  name: "Alice",
3  age: 25
4};
5
6// Dot notation (most common)
7console.log(person.name); // "Alice"
8console.log(person.age);  // 25
9
10// Bracket notation (for dynamic keys)
11console.log(person["name"]); // "Alice"
12
13const key = "age";
14console.log(person[key]); // 25
💡
💨

Modifying Objects

1const person = {
2  name: "Alice",
3  age: 25
4};
5
6// Change a value
7person.age = 26;
8
9// Add new property
10person.job = "Developer";
11
12// Delete a property
13delete person.age;
14
15console.log(person);
16// { name: "Alice", job: "Developer" }
🤔
💨

Nested Objects & Arrays

1const user = {
2  name: "Bob",
3  address: {
4    street: "123 Main St",
5    city: "Boston"
6  },
7  hobbies: ["reading", "gaming"]
8};
9
10// Access nested data
11console.log(user.address.city); // "Boston"
12console.log(user.hobbies[0]);   // "reading"
13
14// Add to nested array
15user.hobbies.push("coding");
🎮

Try It Yourself!

Edit the person object below. Change properties and see the object update!

const person = {

name:
age:
city:
hobbies:
"coding""reading"
}
1const person = {
2  name: "Alice",
3  age: 25,
4  city: "New York",
5  hobbies: ["coding", "reading"]
6};
7
8// Access values
9person.name;        // "Alice"
10person.age;         // 25
11person.hobbies[0];  // "coding"

Quick Access

person.name
"Alice"
person.age
25
person.city
"New York"
person.hobbies.length
2

🧪 Code Lab - Try It Yourself!

🧪Objects Lab
Enter RunShift+Enter New line History
📋Output

Run some code to see the output here!

💡Try These Examples

Practice Exercises

3 exercises to master this lesson