JavaScript Tutorial 10: Object-Oriented Programming (OOP)

Stepping Up to Senior Architecture

You have learned how to create basic Objects using curly braces {}. But imagine you are building a video game with 5,000 enemies. You cannot manually type out 5,000 individual objects. You need a way to build a Factory that stamps out enemies automatically. Today, we learn Object-Oriented Programming (OOP), the architecture used by almost every major software company in the world.

Step 1: Classes (The Blueprint)

In OOP, a Class is a blueprint. Think of it like a cookie cutter. You don't eat a cookie cutter; you use it to stamp out actual cookies. The cookies are called Objects (or Instances).

To create a Class, we use the class keyword. Inside the class, we must have a special method called the constructor(). The constructor is the machine that takes in raw data and builds the object.

The JavaScript: Building the Factory

// 1. We create the Blueprint (Class names always start with a Capital Letter)
class Player {
  // 2. The Constructor accepts arguments to customize the new object
  constructor(nameInput, levelInput) {
    // 'this' refers to the specific cookie currently being cut!
    this.name = nameInput;
    this.level = levelInput;
    this.health = 100; // Default value for everyone
  }
}

Step 2: Instantiation (The 'new' Keyword)

Now that we have a blueprint, we can create as many players as we want. We do this using the new keyword. It tells JavaScript: "Go to the Class, run the Constructor, and give me back a brand new Object."

// 3. Stamping out the objects using 'new'
const player1 = new Player("Cloud", 7);
const player2 = new Player("Aerith", 5);

console.log(player1.name); // Outputs: "Cloud"
console.log(player2.health); // Outputs: 100

Step 3: Class Methods (Adding Behaviors)

Classes don't just hold data; they hold logic. We can add Methods (functions) directly to the Class. Every single object stamped out of this blueprint will automatically know how to use these methods.

class Player {
  constructor(nameInput) {
    this.name = nameInput;
  }

  // Adding a Method (Notice we do not use the 'function' keyword here!)
  attack() {
    return this.name + " swings their sword!";
  }
}

const hero = new Player("Link");
console.log( hero.attack() ); // Outputs: "Link swings their sword!"

Step 4: Inheritance (extends & super)

This is where OOP becomes incredibly powerful. Imagine you want to create a `Mage` class. A Mage is basically a Player, but with one extra feature: Mana (Magic Points). Instead of typing the entire Player class all over again, you can Inherit it.

We use the extends keyword to link the classes. Inside the child's constructor, we must call super() to trigger the parent's constructor first!

// Parent Class
class Player {
  constructor(name) {
    this.name = name;
    this.health = 100;
  }
}

// Child Class (Inherits from Player)
class Mage extends Player {
  constructor(name, manaLevel) {
    super(name); // Runs the Player constructor (sets name & health automatically!)
    this.mana = manaLevel; // Add the new, Mage-specific property
  }

  castSpell() {
    return this.name + " casts Fireball!";
  }
}

const wizard = new Mage("Gandalf", 500);
console.log(wizard.health); // 100 (Inherited from Player)
console.log(wizard.mana); // 500 (Specific to Mage)
console.log(wizard.castSpell()); // "Gandalf casts Fireball!"

Final Quiz: Test Your Architecture Logic

Click the buttons below to verify your knowledge.

1. What is the fundamental difference between a Class and an Object?

A) Classes hold data, Objects hold functions.

Incorrect. Both can hold data and functions.

B) A Class is the abstract blueprint or template. An Object is the actual, physical data entity built from that blueprint.

Correct! You write the `class` once, and you use `new` to stamp out thousands of unique Objects from it.

C) Classes are used in HTML, Objects are used in JavaScript.

Incorrect. While HTML has a `class=""` attribute for CSS, in JavaScript OOP, a Class is a completely different architectural concept.

2. If you are creating a new instance of a Class, which keyword MUST you use?

A) let create

Incorrect. `create` is not a JS keyword.

B) super

Incorrect. `super` is used inside a child class to call the parent's constructor.

C) new

Correct! Calling `new Player()` tells the JS engine to allocate memory, run the constructor, and return a fresh object instance.

3. In the child class `class Admin extends User`, what does the `super()` function do when called inside the Admin's constructor?

A) It calls the constructor of the parent class (`User`) to set up the inherited baseline properties before adding the specific `Admin` properties.

Correct! You cannot build a child without first building the parent. `super()` guarantees the parent logic executes securely.

B) It grants the Admin super-user privileges in the browser.

Incorrect. It has nothing to do with security privileges.

C) It deletes the parent class.

Incorrect. `super()` utilizes the parent; it doesn't destroy it.