DAY 4 : Objects & Nested Objects

Objects are the backbone of JavaScript and TypeScript.
Every real-world app Angular apps, APIs, e-commerce systems, dashboards — use objects everywhere.

Think of an object like a box that stores information with labels.

⭐ What Is an Object?

• An object stores data in key–value pairs.

• Keys are always strings.

• Values can be anything: string, number, array, another object.

Example

const user = {
  name: "Adiba",
  age: 25,
  role: "Frontend Developer"
};

⭐ What Are Nested Objects?

A nested object is simply an object inside another object.

Real-world example:
A user has an address → and an address has city, pin, state.

const userProfile = {
  name: "Adiba",
  contact: {
    email: "adiba@email.com",
    address: {
      city: "Pune",
      pin: 411001
    }
  }
};

This is exactly how user APIs, product APIs, LMS dashboards, cart systems, etc. structure data.

⭐ Why Developers Use Objects Everywhere

• Easy to group related data.

• Easy to pass around as a single unit.

• Flexible: you can add, update, or delete properties anytime.

• Perfect representation of real-world entities.

---

⭐ Accessing Object Values

Dot notation:

console.log(userProfile.name);
console.log(userProfile.contact.email);
console.log(userProfile.contact.address.city);

Bracket notation:

console.log(userProfile["name"]);

Bracket notation is useful when:

• key is dynamic

• key comes from a variable

Practical E-commerce Examples

⭐ 1. Product Object

const product = {
  id: 101,
  name: "Wireless Mouse",
  price: 899,
  specs: {
    color: "Black",
    battery: "AA",
    warranty: "1 Year"
  }
};

⭐ 2. Cart Array (Array of Objects)

const cart = [
  { id: 1, name: "Shoes", price: 1200 },
  { id: 2, name: "Bag", price: 900 }
];

⭐ 3. Users List (Nested Objects inside Array)

const users = [
  {
    name: "Aditi",
    address: { city: "Mumbai", pin: 400001 }
  },
  {
    name: "Riya",
    address: { city: "Pune", pin: 411001 }
  }
];

Objects are the truth behind every API you consume.

4 Challenges

1. Product Description Generator

Input:

const product = {
  name: "Laptop",
  price: 55000,
  specs: { ram: "16GB", storage: "512GB SSD" }
};

Task:

• Write a function that returns:
  "Laptop costs ₹55000 and comes with 16GB RAM and 512GB SSD"

2. Add a New Property to an Object

Task:

• Create a function addProperty(obj, key, value) that:

  • adds the new key/value into the object

  • returns updated object

This mirrors adding dynamic fields in forms or API objects.

3. Nested Object Reader

Given:

const user = {
  name: "Aman",
  contact: {
    address: {
      city: "Delhi",
      pin: 110001
    }
  }
}

Task:

• Write a function that returns "Delhi" by accessing the nested city.

This teaches deep property access — common in Angular templates.

4. Inventory Total Price

Given:

const items = [
  { price: 100 },
  { price: 250 },
  { price: 150 }
];

Task:

• Write a function to return the total price.

This mirrors calculating totals in a shopping cart.

5. Compare Two Product Specifications

Given two product objects:

const p1 = { name: "Laptop A", specs: { cpu: "i5" } };
const p2 = { name: "Laptop B", specs: { cpu: "i7" } };

Task:

• Return which one has the better CPU.

This builds comparison logic — used in filtering/sorting.

Objects form the foundation of real-world data in every frontend project, and mastering them now makes the upcoming days APIs, services, and Angular components far smoother and more intuitive.