<htmlstart/>

JS Objects

Objects store named properties and are the foundation of JavaScript.

Creating Objects

const user = {
  name: "Alice",
  age:  25,
  city: "London",
  isAdmin: false,
};

// Access properties
user.name       // "Alice"
user["age"]     // 25  (bracket notation — useful for dynamic keys)

// Update
user.age = 26;
user["city"] = "Manchester";

// Add new property
user.email = "alice@example.com";

// Delete property
delete user.isAdmin;

Methods (Functions on Objects)

const counter = {
  count: 0,
  increment() {
    this.count++;
  },
  reset() {
    this.count = 0;
  },
};

counter.increment();
counter.increment();
console.log(counter.count);  // 2
counter.reset();

Destructuring

const { name, age } = user;
console.log(name);  // "Alice"
console.log(age);   // 26

// Rename while destructuring
const { name: userName, age: userAge } = user;

// Default values
const { role = "user" } = user;  // "user" if property missing

Spread and Object Methods

// Spread — copy/merge objects
const updated = { ...user, age: 27 };  // overrides age

// Object.keys / values / entries
Object.keys(user);    // ["name", "age", "city", ...]
Object.values(user);  // ["Alice", 26, "London", ...]
Object.entries(user); // [["name","Alice"], ["age",26], ...]

// Iterate entries
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
Use destructuring instead of writing const name = user.name; const age = user.age; — it is shorter and makes it clear which properties you need from an object.
🧩

Test Yourself

4 questions
Q1.How do you access a property using a dynamic key stored in a variable?
Q2.What does Object.keys() return?
Q3.What does the spread operator do when used with objects: { ...obj, x: 1 }?
Q4.What is object destructuring used for?