JavaScript Classes and Inheritance Explained: A Beginner’s Guide to ES6+ OOP

Introduction

When JavaScript first started, it didn’t have classes like other languages, such as Java or Python. Developers had to use functions to mimic object-oriented programming. With ES6, JavaScript introduced classes and inheritance, making code easier to read, reuse, and maintain.

Simply put:

• Classes are like blueprints for creating objects.
• Inheritance lets one class share or extend features from another.

What You’ll Learn

• What classes are in JavaScript
• How to create and use a class
• What inheritance means and why it’s useful
• How to extend one class from another using extends
• Real-life examples of classes and inheritance
• Why these features make your code easier to manage

What Are Classes in JavaScript?

Before ES6, developers used constructor functions to create objects. This worked, but it wasn’t very beginner-friendly. Classes solve that by giving a cleaner, easier-to-understand way to define objects and their behaviors.

Think of a class like a blueprint for cars. The blueprint describes what every car should have (wheels, engine, doors). You can then use that blueprint to build different cars, like a Toyota or a Tesla.

Example:

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  drive() {
    return `${this.brand} ${this.model} is driving.`;
  }
}

const car1 = new Car("Toyota", "Corolla");
console.log(car1.drive());

Here:

• Car is the class (blueprint).
• car1 is an instance created from the Car blueprint.

Moving On: What Is Inheritance?

Now that you know what a class is, let’s talk about inheritance. Inheritance allows one class to get properties and methods from another. This saves you from rewriting the same code.

For example, let’s extend our car blueprint into a blueprint for electric cars:

class ElectricCar extends Car {
  charge() {
    return `${this.brand} ${this.model} is charging.`;
  }
}

const tesla = new ElectricCar("Tesla", "Model 3");
console.log(tesla.drive());   // Inherited from Car
console.log(tesla.charge());  // Unique to ElectricCar

Here:

• ElectricCar inherits from Car using extends.
• It can still add its own method (charge).

This is just like in real life:

• A car has common features (wheels, doors, engine).
• An electric car is still a car, but it also has special features like charging.

Why Classes and Inheritance Matter

Classes and inheritance aren’t just about less typing; they help you organize your project and avoid confusion.

For example:

• In an online shopping app, you could have a User class.
• Then, you could create Customer and Admin classes that extend User.
  • Both share common features like name and email.
  • But Customer can add a shopping cart, while Admin can manage products.

This way, your code feels closer to real-world logic, making it easier to maintain and expand.

Conclusion

JavaScript classes and inheritance, introduced in ES6, give developers a modern way to use object-oriented programming. Think of classes as blueprints for building objects, and inheritance as a way to pass down or add extra features.

Just like real life, where an electric car is still a car but with extra features, your code can be structured to share common traits while allowing for uniqueness. Start experimenting with small examples like vehicles, users, or products, and you’ll see how classes and inheritance can make your JavaScript projects cleaner, smarter, and more powerful.

You can reach out to me via LinkedIn