JavaScript Classes

JavaScript Classes are an important part of the ES6 version of JavaScript, and are used to create reusable components. In this tutorial, you will learn how to use JavaScript Classes to create reusable components and how to use them in your applications.

Why should you use it?

  • JavaScript Classes allow you to create reusable components that can be used in multiple applications.
  • JavaScript Classes provide an easy way to create objects with the same properties and methods.
  • JavaScript Classes allow you to create objects with the same interface, which makes it easier to use them in different applications.

Classes

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method. Classes are a template for creating objects, and they encapsulate all the data and functionality of an object in one place. Classes are used in Object Oriented Programming (OOP) languages, such as JavaScript, to create objects. In JavaScript, classes are first-class citizens, which means that they are treated like any other variable, and can be assigned any value, including functions and objects.

Creating a Class

To create a class, use the class keyword followed by the name of the class. The class name should be capitalized. The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name “constructor” in a class. A constructor can use the super keyword to call the constructor of a parent class.

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

Creating Instances of a Class

To create an instance of a class, use the new keyword followed by the class name. This will create a new object. The new keyword creates a new object, and then calls the constructor method on that object.

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

const person1 = new Person('John', 30);
console.log(person1);

Methods

Methods are functions that are defined inside a class. To create a method, use the same syntax as creating a function, but place it inside the class. The this keyword inside the class refers to the current instance of the class.

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

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

const person1 = new Person('John', 30);
person1.greet();

Static Methods

Static methods are methods that are associated with the class, but not with any particular object of the class. To create a static method, use the static keyword before the method name. Static methods are useful for utility functions, such as functions to create or clone objects.

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

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

  static generateName() {
    const names = ['John', 'Jane', 'Bob'];
    const index = Math.floor(Math.random() * names.length);
    return names[index];
  }
}

const name = Person.generateName();
console.log(name);

Class Inheritance

Class inheritance is a way to extend the functionality of a class by creating a new class that inherits from the original class. The new class inherits all the methods and properties of the original class, and can also have additional methods and properties of its own. To create a class that inherits from another class, use the extends keyword.

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

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

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

const student1 = new Student('John', 30, 'A');
console.log(student1);