Day 7: Objects, Destructuring, Spread & JSON

const product = {
  id: 1,
  name: 'Kaju Katli',
  price: 900,
  category: 'dry',
  inStock: true,
  'shelf life': '15 days',        // keys with spaces need quotes
};

console.log(product.name, product.price);      // dot access
console.log(product['shelf life']);            // bracket access
const field = 'category';
console.log(product[field]);                   // dynamic key → brackets
console.log(product.discount);                 // missing → undefined

const order = { id: 1042, customer: 'Aarti', total: 1800 };
order.status = 'packing';        // add
order.total = 1890;              // update
delete order.customer;           // delete
console.log(order);
console.log('status' in order, Object.hasOwn(order, 'customer'));

const settings = Object.freeze({ gst: 5 });   // lock an object
settings.gst = 18;                            // silently ignored (error in strict mode)
console.log(settings.gst);

const cartLine = {
  name: 'Ghewar',
  price: 650,
  qty: 2,
  total() {                      // a method = function inside an object
    return this.price * this.qty;   // this = the object the method was called on
  },
  label() {
    return `${this.qty} × ${this.name} = ₹${this.total()}`;
  },
};
console.log(cartLine.total());
console.log(cartLine.label());

const stock = { kaju: 25, ghewar: 8, rasmalai: 12, kalakand: 0 };

console.log(Object.keys(stock));
console.log(Object.values(stock));
for (const [item, kg] of Object.entries(stock)) {
  console.log(`${item.padEnd(9)} ${kg > 0 ? kg + ' kg' : 'OUT OF STOCK'}`);
}
const totalKg = Object.values(stock).reduce((sum, kg) => sum + kg, 0);
console.log('Total stock:', totalKg, 'kg');

const customer = { name: 'Riya', phone: '9829012345', address: { city: 'Jaipur', pin: '302003' } };

const { name, phone } = customer;                       // pull out properties
const { address: { city } } = customer;                 // nested
const { email = 'not given' } = customer;               // default value
console.log(name, phone, city, email);

const [firstSweet, , thirdSweet] = ['Kaju', 'Ghewar', 'Ladoo'];   // array destructuring
console.log(firstSweet, thirdSweet);

const updated = { ...customer, phone: '9876543210' };   // copy + override
console.log(customer.phone, '→', updated.phone);

function printLabel({ name, address: { pin } }) {        // destructure parameters
  return `${name} – PIN ${pin}`;
}
console.log(printLabel(customer));

const orders = [
  { id: 1041, customer: 'Aarti', city: 'Jaipur', total: 1800, paid: true },
  { id: 1042, customer: 'Rahul', city: 'Ajmer',  total: 650,  paid: false },
  { id: 1043, customer: 'Sana',  city: 'Jaipur', total: 2400, paid: true },
];
let revenue = 0, unpaid = [];
for (const o of orders) {
  if (o.paid) revenue += o.total;
  else unpaid.push(o.customer);
}
console.log('Revenue collected: ₹' + revenue);
console.log('Remind:', unpaid.join(', '));
console.table(orders.map(({ id, customer, total }) => ({ id, customer, total })));

const order = { id: 1043, items: [{ name: 'Rasmalai', qty: 2 }], paid: true };

const text = JSON.stringify(order);            // object → JSON string (to send/save)
console.log(text, typeof text);

const back = JSON.parse(text);                 // JSON string → object (received)
console.log(back.items[0].name, typeof back);

console.log(JSON.stringify(order, null, 2));   // pretty print with 2 spaces

<div id="card"></div>

<script>
const product = { name: 'Malai Ghewar', price: 650, unit: 'kg', rating: 4.7, stock: 8, image: 'images/ghewar-400.webp' };

function productCard({ name, price, unit, rating, stock, image }) {
  const stockText = stock === 0 ? '❌ Out of stock' : stock < 10 ? `⚠️ Only ${stock} left` : '✅ In stock';
  return `
    <article style="width:220px;border:1px solid #eee;border-radius:12px;overflow:hidden">
      <img src="${image}" alt="${name}" style="width:100%;display:block">
      <div style="padding:10px">
        <b>${name}</b> <small>★ ${rating}</small><br>
        ₹${price}/${unit}<br><small>${stockText}</small>
      </div>
    </article>`;
}
document.querySelector('#card').innerHTML = productCard(product);
</script>