Skip to main content

JavaScript Class

JavaScript classes provide a way to define objects using a syntax that is similar to traditional class-based languages like Java or C++.

Class were introduced in ECMAScript 6 and are built on top of JavaScript's existing prototype-based inheritance system.

How to define class​

To define a class in JavaScript, you use the class keyword followed by the name of the class.

Here's a simple example:

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 define a class called Person with a constructor method that takes two parameters (name and age).
  • We then define a method called sayHello that logs a greeting to the console.

Create an instance of a class​

To create an instance of a class, you use the new keyword followed by the class name and any arguments to the constructor method.

As an example:

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.sayHello(); // logs "Hello, my name is Alice and I am 25 years old."
person2.sayHello(); // logs "Hello, my name is Bob and I am 30 years old."

In this example:

  • We create two instances of the Person class and call the sayHello method on each one.

Class inheritance​

JavaScript classes also support inheritance, which allows you to create a new class that extends an existing class. Here's an example:

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}.`
    );
  }
}

const student1 = new Student("Charlie", 17, 11);

student1.sayHello(); // logs "Hello, my name is Charlie, I am 17 years old, and I am in grade 11."

In this example:

  • We define a Student class that extends the Person class.
  • The Student class has a constructor method that takes three parameters (name, age, and grade) and calls the super() method to invoke the constructor of the parent class.
  • We also override the sayHello method to include the student's grade.
tip

JavaScript classes provide a cleaner and more organized way to write object-oriented code in JavaScript, especially for more complex applications that require inheritance and polymorphism.

The Constructor Method​

The constructor method is a special method that is called when an object is created using a class or a constructor function. It is used to initialize the object with any properties or methods that are needed.

To define a constructor method in a class, you use the constructor keyword followed by a set of parentheses and curly braces.

Here's an example:

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

In this example

  • We define a Person class with a constructor method that takes two parameters (name and age).
  • Inside the constructor method, we use the this keyword to set the name and age properties of the object that is being created.

Why JavaScript Classes​

JavaScript classes were introduced in ECMAScript 6 as a way to provide a more familiar syntax for developers who are used to class-based programming languages like Java and C++.

Here are some benefits of using JavaScript classes:

Encapsulation​

Classes allow you to encapsulate properties and methods within an object, so you can create more complex and organized structures.

Inheritance​

Classes allow you to create a hierarchy of objects that inherit properties and methods from a parent class. This makes it easier to write code that is reusable and modular.

Polymorphism​

Classes allow you to define methods with the same name in different classes, which is known as polymorphism. This makes it easier to write code that can handle different types of objects in a consistent way.

Readability​

Classes provide a clear and readable syntax for defining objects, which can make your code easier to understand and maintain.

Object-oriented programming​

Classes are a fundamental concept in object-oriented programming, which is a popular and powerful programming paradigm. By using classes, you can write more structured and organized code that is easier to extend and maintain.

Summary:

Classes provide a powerful and flexible way to define objects in JavaScript, especially for larger and more complex applications. While they are not necessary for all types of programming, they can be a valuable tool for developers who want to write more organized and maintainable code.