Objects & Classes: Blueprints of Reality

In JavaScript, almost everything is an object. While primitives (like strings and numbers) store single values, objects are complex containers that group related data (properties) and actions (methods). Classes take this a step further by providing a formal blueprint for creating many similar objects efficiently.

This chapter explores how to model the world using objects, manage state with this, and master the internal prototype system that powers JavaScript inheritance.

---

Why This Topic Matters

Objects are the building blocks of every major JavaScript application. Understanding them will allow you to:

• Model Real-World Entities: Represent users, products, or game characters with their own attributes and behaviors.
• Master Encapsulation: Group logic and data together to keep your codebase organized.
• Understand "this": Finally demystify one of the most confusing (but powerful) keywords in the language.
• Scale with Classes: Use inheritance to share code across different types of objects without repetition.

---

The Anatomy of an Object

An object is a collection of key-value pairs.

Accessing Data: Dot vs. Bracket

• Dot Notation (obj.key): The standard, readable way.
• Bracket Notation (obj["key"]): Essential when the key is stored in a variable or contains special characters (like spaces).

const property = "score";
console.log(player[property]); // Dynamic access!

---

The Mystery of this

The keyword this refers to the context in which a function is called.

1. In a Method: this refers to the object "owning" the method.
2. In a Regular Function: this usually refers to the global object (or undefined in strict mode).
3. In an Arrow Function: this is lexical—it inherits this from the surrounding code where it was defined.

Pro Tip: Never use arrow functions as object methods if you need to access other properties via this.

---

Prototypes: The Hidden Engine

JavaScript doesn't have "classes" in the traditional sense; it uses Prototypal Inheritance. Every object has a hidden link to another object called its Prototype.

When you call a method that doesn't exist on an object, JavaScript searches "up" the Prototype Chain until it finds it or hits null.

---

Classes: Modern Blueprints

Classes (introduced in ES6) are "syntactic sugar" over prototypes. they make inheritance much easier to read and write.

class Hero {
  constructor(name, level) {
    this.name = name;
    this.level = level;
  }

  // This method lives on the Prototype!
  levelUp() {
    this.level++;
    return `${this.name} reached level ${this.level}!`;
  }
}

Inheritance: extends and super

Use extends to create a child class, and super() to call the parent's constructor.

class Mage extends Hero {
  constructor(name, level, mana) {
    super(name, level); // Call Hero constructor
    this.mana = mana;
  }
}

---

Destructuring & Spread: Modern Object Patterns

Destructuring

Extract properties into variables instantly.

const { name, level } = player;

Spread (...)

Create shallow copies or merge objects safely.

const updatedPlayer = { ...player, health: 50 }; // Original is untouched!

---

Common Mistakes & Pitfalls

1. Losing this Context: Passing an object method as a callback (e.g., in setTimeout) often breaks this. Use .bind(this) or an arrow function.
2. Mutation Surprises: Changing a property on a copied object that was actually a reference (shallow copy vs. deep copy).
3. Over-Classing: Using a Class when a simple object or a factory function would be much simpler.
4. Prototype Pollution: Adding methods to built-in prototypes (like Array.prototype) is dangerous and bad practice.

---

Mini Exercises

1. The Library: Create a Book class with properties for title and author, and a method getSummary().
2. Inheritance Challenge: Create a Student class that extends a Person class. Add a study() method to the student.
3. Dynamic Access: Write a function that takes an object and a key name, and returns the value of that key using bracket notation.
4. This Trap: Create an object with a property and a method. Use console.log to call the method. Now, try to use an arrow function for the method—does it still work? Why or why not?
5. Shallow Merge: Merge two objects userSettings and defaultSettings using the spread operator. Which one should come last to ensure user settings win?

---

Review Questions

1. When should you use bracket notation [] instead of dot notation .?
2. What does the super() keyword do in a class constructor?
3. How does the "Prototype Chain" help with memory efficiency?
4. What is the difference between a shallow copy and a deep copy of an object?
5. Why do arrow functions behave differently regarding the this keyword?

Reference Checklist

• I can create objects using literal syntax {}.
• I understand how to use this in methods.
• I can explain the Prototype Chain to a peer.
• I can write a Class with a constructor and methods.
• I understand how to use extends for inheritance.
• I know how to use destructuring and spread for objects.