Understanding Objects in JavaScript

Hey everyone! 👋

After getting comfortable with arrays, the next massive milestone in your JavaScript journey is understanding Objects. If arrays are like lists, objects are like detailed fact files.

When I first started, I relied on arrays for everything, but things quickly got confusing. Let's look at why objects are an absolute game-changer, how to build them, and how to manipulate the data inside them.

As always, open up your browser's console (F12 or Right-Click -> Inspect -> Console) and code along!

---

📦 What are Objects and Why Do We Need Them?

Let's imagine you want to store information about a person. If you use an array, it might look like this:

let personArray = ['John', 25, 'New York'];

This works, but there is a major problem: context. How does another developer (or future you) know what 25 means? Is it their age? Their lucky number? How many pets they have?

Arrays use numbered indexes (0, 1, 2) to store data. Objects, on the other hand, use key-value pairs. You give every piece of data a descriptive name (the key).

🛠️ Creating an Object

Let's rewrite that person using an object. We use curly braces {} to create one:

let person = {
  name: 'John',
  age: 25,
  city: 'New York'
};

console.log(person); 

Much better, right? Now it is instantly clear that 25 is the person's age. The words on the left (name, age, city) are the keys, and the information on the right ('John', 25, 'New York') are the values.

---

🔍 Accessing Properties (Dot vs. Bracket Notation)

Now that we have our object, how do we look at specific pieces of data inside it? There are two main ways.

1. Dot Notation (The Most Common)

This is the easiest and most readable way. You just type the object name, a dot, and the key.

console.log(person.name); // Output: John
console.log(person.age);  // Output: 25

2. Bracket Notation

Sometimes, dot notation won't work (for example, if your key has a space in it, or if you are using a variable to find a key). In those cases, use brackets and quotes.

console.log(person['city']); // Output: New York

// Using a variable to access a key
let infoToFind = 'age';
console.log(person[infoToFind]); // Output: 25

---

✏️ Updating, Adding, and Deleting Properties

Objects are dynamic! You can easily change them after they are created.

Updating a Property: To change a value, just access it and use the equals sign = to assign a new value.

person.age = 26; // Happy Birthday, John!
console.log(person.age); // Output: 26

Adding a New Property: If you try to assign a value to a key that doesn't exist yet, JavaScript will just create it for you!

person.job = 'Developer';
console.log(person); 
// Output: { name: 'John', age: 26, city: 'New York', job: 'Developer' }

Deleting a Property: If you want to completely remove a key-value pair, use the delete keyword.

delete person.city;
console.log(person); 
// Output: { name: 'John', age: 26, job: 'Developer' }

---

🔄 Looping Through an Object

What if you want to print out every single key and value inside an object, but you don't know what all the keys are? We can use a special loop called the for...in loop.

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022
};

for (let key in car) {
  // We use bracket notation here because 'key' is a variable changing every loop!
  console.log(key + ": " + car[key]); 
}

// Output:
// brand: Toyota
// model: Corolla
// year: 2022

---

👨‍💻 Your Turn: The Assignment!

Ready to put this into practice? Open your console and try this out:

1. Create an object representing a student. Give it three properties: name (a string), age (a number), and course (a string).

2. Update the student's age property to be one year older.

3. Add a new property called isGraduated and set it to false.

4. Write a for...in loop to print all the keys and their corresponding values to the console.

Objects are the backbone of modern JavaScript, especially when you start working with databases and APIs later on. Master them now, and everything else will feel so much easier!