Understanding Objects in JavaScript

Quest 1: What Exactly is an Object?

In JavaScript, an object is a collection of related data and functionality. Instead of having five different variables for a single person, you group them together into one structure using key-value pairs.

Think of a smartphone. It isn't just one value; it has a brand, a model, storage capacity, and a color.

Creating an Object

We use curly braces {} to define an object literal.

JavaScript

const smartphone = {
  brand: "Apple",
  model: "iPhone 15",
  storage: 128,
  is5G: true
};

---

Quest 2: Accessing Your Data

Once you have stored data in an object, you need a way to get it back out. There are two primary ways to do this: Dot Notation and Bracket Notation.

Dot Notation

This is the most common and readable way. You just use a period followed by the key name.

JavaScript

console.log(smartphone.brand); // Output: Apple

Bracket Notation

This is useful when the key name is stored in a variable or has special characters (like spaces).

JavaScript

const propertyToCheck = "model";
console.log(smartphone[propertyToCheck]); // Output: iPhone 15

---

Quest 3: Updating and Deleting Attributes

Objects in JavaScript are "mutable," meaning you can change them even after you have created them.

Adding or Updating

If the key exists, it updates. If it doesn't, it gets added.

JavaScript

// Updating storage
smartphone.storage = 256;

// Adding a new property
smartphone.color = "Space Grey";

Deleting

If you need to remove a property entirely, use the delete keyword.

JavaScript

delete smartphone.is5G;

---

Quest 4: Methods (Giving Your Object Life)**

Objects don't just sit there with data; they can also do things. When a function is stored inside an object, we call it a Method.

Imagine a bank account object. It has a balance, but it also needs the ability to withdraw money.

JavaScript

const bankAccount = {
  accountHolder: "Prakash Jha",
  balance: 5000,
  
  // This is a method
  withdraw: function(amount) {
    this.balance = this.balance - amount;
    return "Transaction successful. New balance: " + this.balance;
  }
};

console.log(bankAccount.withdraw(1000)); // Output: Transaction successful. New balance: 4000

---

Final Boss Challenge: The User Profile

To finish this assignment, let's create a real-world user profile object that includes nested data and a method.

JavaScript

const userProfile = {
  username: "prakash_dev",
  level: 15,
  skills: ["JavaScript", "React", "Node.js"],
  address: {
    city: "Jaipur",
    state: "Rajasthan"
  },
  statusUpdate: function() {
    return this.username + " is currently learning Objects!";
  }
};

// Accessing nested data
console.log(userProfile.address.city); // Jaipur

// Calling the method
console.log(userProfile.statusUpdate()); // prakash_dev is currently learning Objects!

---

Mastering objects is the gateway to understanding how modern applications handle data. Once you get comfortable with this, the "Object-Oriented Programming" (OOP) assignment will feel much more intuitive.