Classes and OOP in JavaScript: ES6 Classes, Inheritance, and Static Methods

Object-Oriented Programming (OOP) is a foundational programming paradigm built around concepts like objects, classes, inheritance, and encapsulation. With ES6 (ECMAScript 2015), JavaScript introduced a far more elegant syntax for working with classes. This doesn’t replace JavaScript’s prototype-based system under the hood, but it makes OOP patterns more familiar and accessible.

In this post, we’ll dive into ES6 classes, explore inheritance, and understand how to use static methods.

1. ES6 Classes

Before ES6, creating objects with custom behavior often required constructor functions and manipulating prototypes. With ES6, we now have the class keyword, which provides a cleaner and more readable syntax.

Example:

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

  greet() {
    return `Hello, my name is ${this.name}, and I’m ${this.age} years old.`;
  }
}

const alice = new Person("Alice", 25);
console.log(alice.greet());
// Output: Hello, my name is Alice, and I’m 25 years old.

Here’s what’s happening:

• The constructor method is automatically invoked when you create a new object with new.
• this refers to the current instance.
• Class methods (like greet) are automatically added to the prototype.

2. Inheritance with extends

A key feature of OOP is inheritance — the ability to create new classes that build on existing ones. In JavaScript, this is done with the extends keyword and the super function to call the parent’s constructor.

Example:

js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Call parent constructor
    this.breed = breed;
  }

  speak() {
    return `${this.name} barks!`;
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.speak()); // Buddy barks!

Key details:

• extends links the child class to the parent class.
• super() must be called before using this in the child constructor.
• Methods in the child can override parent methods (like Dog overriding speak).

This allows us to build hierarchies of objects, reusing and extending logic without rewriting everything.

3. Static Methods

In some cases, you want methods that belong to the class itself, not to individual instances. That’s where static methods come in.

Example:

js
class MathHelper {
  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathHelper.add(5, 10));     // 15
console.log(MathHelper.multiply(3, 4)); // 12

Notice that we don’t need to create an instance of MathHelper. Instead, we can call the methods directly on the class.

Another use case is utility functions tied to a class:

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

  static species() {
    return "Homo sapiens";
  }
}

const bob = new Person("Bob");

console.log(Person.species()); // Homo sapiens
// console.log(bob.species()); // Error: not available on instances

Static methods are useful for utility logic or factory functions that are different from instance-specific behavior.

4. Putting It Together

Let’s combine these concepts with a small example:

js
class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} is starting...`;
  }
}

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

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

  static wheels() {
    return 4;
  }
}

const car = new Car("Tesla", "Model S");
console.log(car.start()); // Tesla is starting...
console.log(car.drive()); // Tesla Model S is driving.
console.log(Car.wheels()); // 4 (static method)

Here:

• Vehicle is a base class.
• Car extends Vehicle and adds its own behavior.
• wheels()is a static method available directly on Car.

Final Thoughts

• ES6 classes provide a neat, familiar syntax for OOP in JavaScript, though under the hood they still use prototypes.
• Inheritance with extends and super allows classes to build upon each other.
• Static methods are for class-level logic, separate from instance behavior.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud