🧱 JavaScript Objects The Power and Usage of Objects

(“Is everything really an object?”
The answer is: Yes. Surprisingly, yes. 😄)

Moving forward in JavaScript without understanding objects
is like taking a city tour without a map.
You walk around, but you have no idea where you are.

But once you understand objects:
👉 Your code becomes organized
👉 Your data gains meaning
👉 JavaScript says “welcome” to you 👋

1️⃣ What Is an Object?

“A Smart Box That Holds Everything Together”

An object is a data structure that works with the key–value logic.

A real-life example:

Think of a person:
They have a name
They have an age
They have a job
They have hobbies

That is exactly an object.

const user = {
  name: "Cansu",
  age: 28,
  job: "Frontend Developer"
};

🧠 What do we see here?

• user → the name of the object
• name, age, job → properties
• "Cansu", 28, "Frontend Developer" → values

📌 Golden Info:
In JavaScript:

• Array → object
• Function → object
• Date → object

So… almost everything is an object 😅

2️⃣ Accessing Data Inside an Object

“Let’s Open the Box”

🔹 Dot Notation (The Favorite Way ❤️)

console.log(user.name); // Cansu
console.log(user.age);  // 28

✔ Readable
✔ Clean
✔ Used 90% of the time

🔹 Bracket Notation (Hidden Power 💥)

console.log(user["job"]);

📌 When is it needed?

• When the key is dynamic
• When there are spaces or special characters

const user = {
  "full name": "Cansu Porsuk"
};

console.log(user["full name"]);

Dot notation fails here ❌
Bracket notation saves the day ✅

3️⃣ Adding New Properties to an Object

“Updating Later Is Totally Allowed”

user.city = "Istanbul";
user.isActive = true;

console.log(user);

🧠 JavaScript says:

“The object may be constant, but its contents can change.”

📌 const object = value is fixed, content is flexible 🎯

4️⃣ Deleting Data from an Object

“I Don’t Need This Info Anymore”

delete user.age;

⚠️ Be careful:

• delete cannot be undone
• Wrong property → regret 🥲

5️⃣ Functions Inside Objects (Methods)

“The Object Starts Talking” 🗣️

const user = {
  name: "Cansu",
  greet: function () {
    console.log("Hello, I am " + this.name);
  }
};

user.greet();

🧠 The magic here: this

• this → refers to the object itself
• this.name → user.name

📌 Practical Tip:
If an object contains a function, it’s called a method.

6️⃣ Object + Arrow Function Trap ⚠️

“Something Feels Off Here…”

const user = {
  name: "Cansu",
  greet: () => {
    console.log(this.name);
  }
};

😬 Output?

undefined

💣 Why?
Arrow functions do not have their own this.

📌 Rule:

• Object methods → normal functions
• Short operations → arrow functions

7️⃣ Nested Objects

“An Object Inside Another Object” 🧩

const user = {
  name: "Cansu",
  address: {
    city: "Istanbul",
    country: "Turkey"
  }
};

console.log(user.address.city); // Istanbul

Just like real life:

Person → address → city

📌 Readability rule:
More than 3 levels deep → alarm 🚨

8️⃣ Object Destructuring

“Take What You Need and Go” 🏃‍♂️

const user = {
  name: "Cansu",
  age: 28,
  job: "Developer"
};

const { name, job } = user;

console.log(name); // Cansu
console.log(job);  // Developer

💡 Advantages:

• Shorter code
• Cleaner syntax
• More professional look

9️⃣ Object.keys, Object.values, Object.entries

“The Object Inspection Kit”

Object.keys(user);
// ["name", "age", "job"]

Object.values(user);
// ["Cansu", 28, "Developer"]

Object.entries(user);
// [["name","Cansu"], ["age",28], ["job","Developer"]]

📌 When used with loops, they are awesome 🔥

🔟 Real-Life Usage

Data Coming from an API (Mini Scenario)

const product = {
  title: "Laptop",
  price: 25000,
  inStock: true
};

if (product.inStock) {
  console.log(product.title + " is available for purchase ✅");
}

Object = the common language between backend and frontend 🌍

🚨 Most Common Object Mistakes

❌ this with arrow functions
❌ Wrong key names (user.Name ≠ user.name)
❌ Overly deep nested objects
❌ Using objects instead of arrays (and vice versa)

🎯 Big Summary (If You Read This, You’re a JS Dev)

• Object = organization
• Object = meaning
• Object = real-world modeling

If you’re good at JavaScript:
👉 You’re at peace with objects 🤝

If you’re not:
👉 Your code isn’t at peace with you either 😄