JavaScript Objects — Key-Value Pairs and Methods

What is an Object?

An object groups related data and functionality together using key-value pairs. Think of it like a form with fields:

const user = {
  name: "Rahul Sharma",
  age: 25,
  city: "Mumbai",
  isPremium: true,
  skills: ["HTML", "CSS", "JavaScript"]
};

Accessing Properties

const user = { name: "Rahul Sharma", age: 25, city: "Mumbai", isPremium: true, skills: ["HTML", "CSS", "JavaScript"] };

// Dot notation (most common)
console.log(user.name);       // Rahul Sharma
console.log(user.age);        // 25
console.log(user.skills[0]);  // HTML

// Bracket notation (use with dynamic keys)
console.log(user["city"]);    // Mumbai

const key = "isPremium";
console.log(user[key]);       // true

Adding and Updating Properties

const product = {
  name: "Dal Makhani",
  price: 150
};

// Update
product.price = 175;

// Add new property
product.category = "Main Course";
product.inStock = true;

console.log(product);
// { name: "Dal Makhani", price: 175, category: "Main Course", inStock: true }

Methods — Functions Inside Objects

const calculator = {
  value: 0,

  add: function(num) {
    this.value += num;
    return this;   // return this to enable chaining
  },

  subtract(num) {       // shorthand method syntax
    this.value -= num;
    return this;
  },

  getResult() {
    return this.value;
  }
};

calculator.add(100).add(50).subtract(20);
console.log(calculator.getResult());  // 130

Object Destructuring — Extract Properties

const order = {
  id: "ORD-001",
  customer: "Rahul",
  total: 450,
  status: "delivered"
};

// Without destructuring
const orderId = order.id;
const orderCustomer = order.customer;

// With destructuring — cleaner
const { id, customer, total } = order;
console.log(id);       // ORD-001
console.log(customer); // Rahul

// With rename
const { total: orderTotal } = order;
console.log(orderTotal); // 450

// Default values
const { discount = 0 } = order;
console.log(discount);  // 0 (default, since order has no discount)

Spread Operator — Copy and Merge Objects

const defaults = { theme: "dark", lang: "en", fontSize: 16 };
const userPrefs = { lang: "hi", fontSize: 18 };

// Merge — userPrefs overrides defaults
const settings = { ...defaults, ...userPrefs };
console.log(settings);
// { theme: "dark", lang: "hi", fontSize: 18 }

// Copy an object (does not mutate original)
const original = { name: "Rahul", score: 100 };
const copy = { ...original, score: 200 };
console.log(original.score);  // 100 (unchanged)
console.log(copy.score);      // 200

Array of Objects — Real-World Pattern

const tutorials = [
  { id: 1, title: "What is HTML?", level: "beginner", views: 1200 },
  { id: 2, title: "CSS Flexbox", level: "beginner", views: 980 },
  { id: 3, title: "React Hooks", level: "intermediate", views: 750 }
];

// Find tutorial by id
const found = tutorials.find(t => t.id === 2);
console.log(found.title);  // CSS Flexbox

// Get all beginner tutorials
const beginners = tutorials.filter(t => t.level === "beginner");

// Total views
const totalViews = tutorials.reduce((sum, t) => sum + t.views, 0);
console.log("Total views:", totalViews);  // 2930

Try It Yourself

1. Create a user object with name, email, age, and a greet() method
2. Create an array of 3 product objects, then use map() to get an array of just the names
3. Use spread to merge two config objects where the second overrides the first