🧱 Day 9 — Objects & JSON in JavaScript

Hi Guys, Welcome to Day 9 🎉 By now, you’ve worked with arrays and strings — perfect for ordered lists and text manipulation. But what if you want to store related data together? For example, a student’s name, roll number, and grade — all in one place. That’s where **Objects** come in! Objects let you group related information into one structure, making code cleaner and easier to manage.

🧩 1️⃣ What is an Object?

An object is a **collection of key-value pairs**, where each key (also called a property) maps to a value. Think of it as a real-world “thing” — a person, car, or product — each with properties that describe it.

let student = {
  name: "Rahul",
  age: 23,
  course: "JavaScript",
  isActive: true
};

console.log(student);

Here, student is an object containing four properties — name, age, course, and isActive.

🔍 2️⃣ Accessing Object Properties

There are two ways to access values inside an object:

console.log(student.name); // Dot notation
console.log(student["age"]); // Bracket notation

Dot notation is easier and commonly used, while bracket notation is useful when keys have spaces or special characters.

🛠️ 3️⃣ Modifying Object Properties

student.course = "React.js"; // Update value
student.city = "Hyderabad";  // Add new key-value pair

delete student.isActive;     // Remove property

console.log(student);

Objects are dynamic — you can add, modify, or delete properties anytime.

📦 4️⃣ Nested Objects

Objects can contain other objects or arrays, creating complex data structures.

let company = {
  name: "TechCorp",
  location: "India",
  employees: {
    manager: "Aisha",
    developer: "Rahul",
    intern: "Kiran"
  }
};

console.log(company.employees.developer); // Rahul

🧮 5️⃣ Looping Through Objects

You can use the for...in loop to iterate over keys in an object.

for (let key in student) {
  console.log(key + ": " + student[key]);
}

💡 6️⃣ Object Methods

JavaScript provides built-in methods to work with objects efficiently.

• Object.keys(obj) — returns all keys
• Object.values(obj) — returns all values
• Object.entries(obj) — returns key-value pairs

console.log(Object.keys(student));
console.log(Object.values(student));
console.log(Object.entries(student));

🧠 7️⃣ Understanding JSON

**JSON (JavaScript Object Notation)** is a lightweight format used for data exchange. It looks similar to JavaScript objects but only supports text-based data (no functions or methods).

let user = {
  name: "Rahul",
  age: 23,
  skills: ["HTML", "CSS", "JS"]
};

// Convert object to JSON
let jsonData = JSON.stringify(user);
console.log(jsonData);

// Convert JSON back to object
let parsedData = JSON.parse(jsonData);
console.log(parsedData);

This is essential when sending or receiving data from APIs, because web servers communicate in JSON format.

🌐 8️⃣ Real-Life Example — API Data

let product = {
  id: 101,
  title: "Wireless Mouse",
  price: 799,
  inStock: true
};

let jsonProduct = JSON.stringify(product);  // Send to server
let backToObj = JSON.parse(jsonProduct);    // Convert response back
console.log(backToObj.title); // Wireless Mouse

🧮 9️⃣ Practice Task

1. Create an object for your favorite book with properties like title, author, and price.
2. Add a new property dynamically.
3. Convert your object to JSON and back using JSON.stringify() and JSON.parse().
4. Loop through all keys and print their values.

🎯 Summary

Objects are the backbone of modern JavaScript applications — they help organize, store, and structure data efficiently. Today you also learned about **JSON**, a universal data format that bridges front-end and back-end communication. In the next session, you’ll bring your web pages to life with **DOM Manipulation** — controlling HTML and CSS directly with JavaScript!

← Prev Next →