ES6 Classes

With the introduction of ES6 (ECMAScript 2015), JavaScript added a new way to write objects and handle inheritance — Classes. Although JavaScript has always been a prototype-based language, classes provide a cleaner, more familiar syntax for developers coming from other object-oriented languages like Java, C++, or Python.

Let’s explore what ES6 classes are, how they work, and why they are useful.

What Is a Class?

A class is a blueprint for creating objects. It defines properties (variables) and methods (functions) that the objects will have. In JavaScript, classes are just a simpler and clearer way to create objects and handle inheritance using prototypes.

Basic Syntax

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

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const user1 = new Person("Kirti", 22);
user1.greet(); // Output: Hello, my name is Kirti.

Explanation of the Code

• class Person {}: This defines a new class named Person.
• constructor(name, age): A special method that runs automatically when a new object is created. It sets the initial values.
• this.name and this.age: These refer to the object’s properties.
• greet(): This is a regular method defined inside the class. All objects created from this class will have this method.

Why Use Classes?

Before ES6, object creation was done using constructor functions and prototypes. The syntax was more complex and harder to read. ES6 classes make the code cleaner, more organized, and easier to manage — especially when building large applications.

Inheritance in ES6 Classes

Inheritance means one class can extend another class. This allows you to reuse code and create more specific versions of a general class.

Example:

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

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

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Tommy");
dog.speak(); // Output: Tommy barks.

Explanation:

• extends: The Dog class inherits from Animal.
• super(): If used in the constructor, it calls the parent class constructor.
• You can override parent methods like speak() in the child class.

Getters and Setters

Classes also support getters and setters to control how properties are accessed and updated.

  class Product {
  constructor(name, price) {
    this._name = name;
    this._price = price;
  }

  get price() {
    return this._price;
  }

  set price(newPrice) {
    if (newPrice > 0) {
      this._price = newPrice;
    }
  }
}

const item = new Product("Shampoo", 100);
console.log(item.price); // 100
item.price = 150;
console.log(item.price); // 150

Class Expressions

You can also define classes using expressions:

const Vehicle = class {
  constructor(type) {
    this.type = type;
  }
};

const bike = new Vehicle("Bike");
console.log(bike.type); // Bike

Important Points

• Classes are not hoisted like functions. You must declare them before using.
• Behind the scenes, JavaScript classes still use prototypes.
• The constructor() method is optional. If not written, a default constructor is used.

Comparison with Constructor Function

Before ES6:

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () {
  console.log("Hello " + this.name);
};

With ES6 Class:

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

  greet() {
    console.log("Hello " + this.name);
  }
}

Both do the same thing, but the class version is easier to read and write.

When to Use ES6 Classes?

Use ES6 classes when:

• You want to create multiple objects with the same structure.
• You are building large applications with multiple components.
• You want a clean and modular structure for your code.

Conclusion

ES6 classes bring simplicity and structure to JavaScript programming. They are not a new feature in functionality but rather a new syntax for existing behavior. Whether you’re a beginner or experienced developer, understanding classes will help you write more organized, efficient, and reusable code.