Objects and JSON

Objects are the most important data structure in JavaScript. They store collections of key-value pairs and are the foundation of almost everything in the language — from simple data containers to complex class instances.

---

Creating Objects

Object Literal

The most common way to create an object:

const person = {
  firstName: "Alice",
  lastName: "Smith",
  age: 30,
  isStudent: false,
};

Rules for Property Names

• Property names (keys) are strings (or Symbols).
• If the key is a valid identifier, quotes are optional.
• If the key contains spaces or special characters, wrap it in quotes:

const obj = {
  "full name": "Alice Smith",
  "data-id": 42,
};

---

Accessing Properties

Dot Notation (preferred when key is a valid identifier)

console.log(person.firstName); // "Alice"
console.log(person.age);       // 30

Bracket Notation (required for dynamic keys or special characters)

console.log(person["lastName"]); // "Smith"

const key = "age";
console.log(person[key]); // 30

console.log(obj["full name"]); // "Alice Smith"

---

Adding, Modifying, and Deleting Properties

const car = { make: "Toyota" };

// Add a property
car.model = "Camry";
car.year = 2024;

// Modify a property
car.year = 2025;

// Delete a property
delete car.year;

console.log(car); // { make: "Toyota", model: "Camry" }

---

Shorthand Syntax (ES6)

Property Shorthand

When a variable name matches the property name:

const name = "Alice";
const age = 30;

// Instead of { name: name, age: age }
const person = { name, age };
console.log(person); // { name: "Alice", age: 30 }

Method Shorthand

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  },
};

console.log(calculator.add(5, 3)); // 8

Computed Property Names

const field = "email";
const user = {
  [field]: "alice@example.com",
};
console.log(user.email); // "alice@example.com"

---

Iterating Over Objects

Method	Returns
Object.keys(obj)	Array of keys
Object.values(obj)	Array of values
Object.entries(obj)	Array of [key, value] pairs

const scores = { maths: 90, english: 85, science: 92 };

Object.keys(scores);    // ["maths", "english", "science"]
Object.values(scores);  // [90, 85, 92]
Object.entries(scores);
// [["maths", 90], ["english", 85], ["science", 92]]

// Iterating with for...of and destructuring
for (const [subject, score] of Object.entries(scores)) {
  console.log(subject + ": " + score);
}

---

Destructuring Objects

Extract properties into variables:

const user = { name: "Alice", age: 30, city: "London" };

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

// Rename variables
const { name: userName, age: userAge } = user;
console.log(userName); // "Alice"

// Default values
const { country = "UK" } = user;
console.log(country); // "UK"

// Nested destructuring
const order = {
  product: { name: "Laptop", price: 999 },
  quantity: 2,
};
const { product: { name: productName, price } } = order;
console.log(productName); // "Laptop"

---

The Spread Operator with Objects