JavaScript Objects

In JavaScript, an object is a collection of key-value pairs. Think of an object as a real-world object: it has properties (attributes) and methods (actions it can perform). Objects allow you to store complex data and organize it logically.

1️⃣ Creating an Object

You can create an object using curly braces {}:

let person = {
  name: "Alice",
  age: 25,
  city: "Paris"
};

console.log(person);

• name, age, city → properties (keys)
• "Alice", 25, "Paris" → values
• Each key-value pair is separated by a comma

2️⃣ Accessing Object Properties

You can access values using either dot notation or bracket notation:

// Dot notation
console.log(person.name); // Alice

// Bracket notation
console.log(person["age"]); // 25

• Dot notation → easy and common
• Bracket notation → useful if the property name is stored in a variable

let key = "city";
console.log(person[key]); // Paris

3️⃣ Modifying Object Properties

You can update, add, or delete properties:

// Update existing property
person.age = 26;

// Add new property
person.country = "France";

// Delete property
delete person.city;

console.log(person);
// { name: "Alice", age: 26, country: "France" }

4️⃣ Objects with Methods

Objects can have functions as properties, called methods:

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Hello, my name is Alice

• this refers to the current object
• Methods allow objects to perform actions

5️⃣ Looping Through Object Properties

You can use a for...in loop to iterate over keys:

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

// Output:
// name: Alice
// age: 25
// greet: function() { ... }

Compilation of Entire Code

Explanation:

• person object stores properties and a method
• Buttons demonstrate viewing, updating, adding, and calling methods
• for...in loop displays all keys and values dynamically