Understanding ES6 Classes in JavaScript — The Modern Way to Create Objects

What Is a Class?

A class in JavaScript is a template for creating objects.
It allows you to define properties and methods that all created objects (called instances) will have.

Think of a class like a blueprint — you can use it to build many objects with the same structure and behavior.

🏗️ Example: Creating a Basic Class

Here’s the simplest example of a class in JavaScript:

// Defining a class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Method inside the class
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Creating an object (instance)
const person1 = new Person("Alice", 25);
person1.greet(); // Output: Hello, my name is Alice and I am 25 years old.

Explanation:

• class Person { ... } → defines a class named Person.

• constructor() → a special method that runs automatically when you create a new object.

• this.name and this.age → store data specific to that object.

• greet() → a method shared by all objects created from this class.

🧩 Adding More Methods

You can add as many methods as you like inside a class:

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

  start() {
    console.log(`${this.brand} ${this.model} is starting...`);
  }

  stop() {
    console.log(`${this.brand} ${this.model} has stopped.`);
  }
}

const myCar = new Car("Toyota", "Corolla");
myCar.start(); // Output: Toyota Corolla is starting...
myCar.stop();  // Output: Toyota Corolla has stopped.

Class Inheritance (Extending Another Class)

One of the biggest advantages of classes is inheritance.
You can create a new class that inherits properties and methods from another class using the extends keyword.

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

  makeSound() {
    console.log("Some generic sound...");
  }
}

// Dog class inherits from Animal
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // Calls the parent class constructor
    this.breed = breed;
  }

  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.makeSound(); // Output: Woof! Woof!
console.log(dog.name); // Output: Buddy

Getters and Setters in Classes

Getters and setters let you control how properties are accessed or modified.

class User {
  constructor(username) {
    this._username = username;
  }

  get username() {
    return this._username.toUpperCase();
  }

  set username(newName) {
    if (newName.length < 3) {
      console.log("Username must be at least 3 characters long.");
    } else {
      this._username = newName;
    }
  }
}

const user = new User("john");
console.log(user.username); // Output: JOHN

user.username = "Al"; // Output: Username must be at least 3 characters long.
user.username = "Alice";
console.log(user.username); // Output: ALICE