JavaScript Classes

In the previous lesson, we learned how to read a user’s location with the Geolocation API. Now let’s step into object-oriented programming and learn how classes let us build objects from a single blueprint.

🧱 What is Object-Oriented Programming?

Object-oriented programming, often shortened to OOP, is a way of organizing code by bundling related data and behavior together into a single unit called an object. The data describes what the object is, and the behavior describes what the object can do.

A car object holds data such as its color and speed, and behavior such as starting the engine or braking. Keeping that data and behavior in one place makes code easier to read, reuse, and extend.

A class is the tool JavaScript gives you to create these objects. A class is a blueprint that describes the shape and behavior every object made from it will share.

🏗️ Creating a Class

You create a class with the class keyword, followed by a name and a pair of curly braces. The body of the class holds its behavior. Class names start with a capital letter by convention.

This is the simplest possible class:

class Dog {
  bark() {
    console.log("Woof!");
  }
}

Let’s walk through what each line does:

• class Dog { opens the blueprint and names it Dog, starting with a capital letter by convention.
• bark() { ... } defines a method, a behavior that every dog built from this blueprint will have.
• console.log("Woof!"); is the work the bark method performs when it runs.
• The closing } ends the class body.

The Dog class is a blueprint. On its own it does nothing yet, the same way a house blueprint is not a house.

🐾 Creating an Instance with new

To turn a blueprint into a real object, you use the new keyword. The object you get back is called an instance of the class.

This creates a dog and tells it to bark:

class Dog {
  bark() {
    console.log("Woof!");
  }
}

const rex = new Dog(); // ✅ create an instance
rex.bark(); // Woof!

Let’s trace the two new lines at the bottom:

• const rex = new Dog(); builds a fresh Dog object and stores it in rex, which is now an instance of the class.
• rex.bark(); calls the bark method on that instance with a dot, just like any other object, so it prints Woof!.

You can build as many instances as you like from one class, and each one is independent.

const rex = new Dog();
const bella = new Dog();

rex.bark(); // Woof!
bella.bark(); // Woof!

Here is what these lines do:

• const rex = new Dog(); and const bella = new Dog(); create two separate Dog instances from the same blueprint.
• rex.bark(); and bella.bark(); call bark on each instance independently, so each one prints its own Woof!.

🛠️ Adding More Methods

A method is a function that lives inside a class. You can add as many methods as the object needs, each describing a different behavior.

This Dog class has two methods:

class Dog {
  bark() {
    console.log("Woof!");
  }

  sit() {
    console.log("The dog sits down.");
  }
}

const buddy = new Dog();
buddy.bark(); // Woof!
buddy.sit(); // The dog sits down.

Let’s look at how the two methods are used:

• bark() and sit() are two separate methods inside the class, each with its own behavior.
• const buddy = new Dog(); creates an instance that has access to both methods.
• buddy.bark(); and buddy.sit(); call each method in turn, printing a different message each time.

Notice that methods inside a class do not use the function keyword and are not separated by commas. You just write the method name, parentheses, and a body.

🧩 The Constructor

Right now every dog is identical, because the class holds no data of its own. To give each instance its own data, classes use a special method called the constructor. It runs automatically when you write new, and it sets up the starting data for that instance.

Here is a Person class that stores a name:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hi, I'm ${this.name}.`);
  }
}

const alex = new Person("Alex");
alex.greet(); // Hi, I'm Alex.

Let’s step through how the data flows:

• constructor(name) { ... } runs automatically when you write new, receiving the value you pass in.
• this.name = name; saves that value onto the instance so the object remembers it.
• greet() reads the stored value back with this.name and prints it.
• const alex = new Person("Alex"); passes "Alex" into the constructor, and alex.greet(); then prints Hi, I'm Alex.

We will explore the constructor in full detail in the next lesson, so a quick look is enough for now.

👥 A Practical Example

The real power of classes shows when you create several instances that each carry their own data. This BankAccount class creates separate accounts from one blueprint.

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner;
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
    console.log(`${this.owner} now has ${this.balance}.`);
  }
}

const first = new BankAccount("Alex", 100);
const second = new BankAccount("Sam", 50);

first.deposit(25); // Alex now has 125.
second.deposit(10); // Sam now has 60.

Let’s break down what happens here:

• constructor(owner, balance) takes two values and stores them on the instance with this.owner and this.balance.
• deposit(amount) adds the amount to that instance’s balance and prints the new total.
• const first = ... and const second = ... create two separate accounts, each with its own owner and balance.
• first.deposit(25); and second.deposit(10); update each account independently, so depositing into one never affects the other.

One class produced two fully independent objects.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ Object-oriented programming bundles data and behavior into objects
• ✅ A class is a blueprint for creating objects with the same shape and behavior
• ✅ You define a class with class Name { ... }
• ✅ You create an instance with new Name()
• ✅ Methods are functions written inside the class, called with ()
• ✅ The constructor gives each instance its own data

🚀 What’s Next?

Now that you can build objects from a class, let’s take a closer look at how the constructor sets up each instance. Let’s continue to Constructors.