dark

What are Classes in ES6?

What are Classes in ES6?

In JavaScript, a class is a template for creating objects that encapsulate data and methods. Classes were introduced in ES6 (ECMAScript 2015) and provide a cleaner, more concise syntax for creating objects than the traditional constructor function syntax.

Usage

To create a class in JavaScript, you use the class keyword followed by the name of the class. The body of the class contains the properties and methods of the class.

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

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

In this example, we create a Person class with a constructor that takes in a name and an age. We also define a sayHello method that logs a message to the console.

To create an instance of the Person class, you can use the new keyword and pass in the necessary arguments:

const john = new Person('John', 30);
john.sayHello(); // Hello, my name is John and I am 30 years old.

Inheritance

Classes in JavaScript also support inheritance, which allows you to create a new class based on an existing class. To inherit from a class, you use the extends keyword followed by the name of the base class.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}, I am ${this.age} years old, and I am in grade ${this.grade}.`);
  }
}

In this example, we create a Student class that extends the Person class. The Student class has a constructor that takes in a name, an age, and a grade. We call the super method to call the constructor of the Person class with the name and age arguments, and then we set the grade property.

The Student class also overrides the sayHello method of the Person class to include the grade.

const jane = new Student('Jane', 15, 9);
jane.sayHello(); // Hello, my name is Jane, I am 15 years old, and I am in grade 9.

Constructor

The constructor is a special method that is called when an instance of a class is created. It is used to initialize the properties of the class.

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

In this example, the Person class has a constructor that sets the name and age properties of the instance.

Method

A method is a function that is a property of an object or class. It can be called on instances of the object or class.

class Person {
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

In this example, the Person class has a sayHello method that logs a message to the console.

Inheritance

Inheritance is a mechanism that allows you to create a new class based on an existing class. The new class inherits the properties and methods of the base class.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

In this example, the Student class extends the Person class and inherits the name and age properties and the sayHello method. It also adds a grade property and overrides the sayHello method.

Conclusion

Classes in JavaScript provide a cleaner, more concise syntax for creating objects than the traditional constructor function syntax. They also support inheritance, which allows you to create new classes based on existing classes. Understanding classes is an important part of modern JavaScript development.

Related tutorials