Explanation of Classes in JavaScript

Explanation of Classes in JavaScript

Hello everyone, in this article we are going to talk about usages of classes which is one of very important feature in JavaScript with help of examples.

Let's get started.

One of very important feature of Javascript is working with objects and classes and handle the data in an efficient way. Javascript provides an efficient way to create and use classes.

What is a Class?

A class is a template of objects which has same behaviours and properties. We can define the behaviours of objects and we can make them to use same properties.
Classes are introduced in JavaScript with ES6 and after ES6 JavaScript is started to be ObJect Oriented Programming language and more organised.

To create a class in JavaScript we can use class keyword. Below you can see the example of defining a class.

// Define a new class
class Vehicle {
  constructor(brand, year) {
    this.brand = brand;
    this.year = year;
  }

  start() {
    console.log(`Vehicle brand is ${this.brand} and year is ${this.year}.`);
  }
}

//Initialise and use the class
const vehicle = new Vehicle('Tofas', 2000);
vehicle.start(); // Vehicle brand is Tofas and year is 2000.

As you can see above it is a classic class definition. In here brand and year are properties of class and start() is a method of a class. Also as you can see in constructor method we are initialising the values with parameters with we have sent.

Classes in JavaScript has inheritance concept like the other programming languages. Child class should extend the parent class and use super function to get parents properties.

// Define a new class
class Vehicle {
  constructor(brand, year) {
    this.brand = brand;
    this.year = year;
  }

  start() {
    console.log(`Vehicle brand is ${this.brand} and year is ${this.year}.`);
  }
}

class Truck extends Vehicle {
  constructor(brand, year, weight) {
    super(brand, year); // Initialise the parent
    this.weight = weight;
  }

  // Override the function of Parent
  start() {
    console.log(`Weight of the truck is ${this.weight}.`);
  }
}

// Parent class
const vehicle = new Vehicle('Tofas', 2000);
vehicle.start(); // Vehicle brand is Tofas and year is 2000.

// Derived class
const truck = new Truck('BMC', 2020, 3000);
truck.start(); // Weight of the truck is 3000.

As you can see above we have two classes. We created the Vehicle class as a parent and we derived Truck class from this parent class. So now child class is allowed to use the properties of parent class. Also both classes have same method, In child class we defined exactly same method to override the parent method. When we call the method from child class, methods from child will be called.

We can also create Util classes within JavaScript with static functions. We can define static functions in classes and we can directly call them from outside of classes without initialising the class.

class MathUtil {
  static sum(a, b) {
    return a + b;
  }
  static multiply(a, b) {
    return a * b;
  }
  static subtract(a, b) {
    return a - b;
  }
  static divide(a, b) {
    return a / b;
  }
}

console.log(MathUtil.sum(10, 20)); // 30
console.log(MathUtil.multiply(10, 20)); // 200
console.log(MathUtil.subtract(50, 30)); // 20
console.log(MathUtil.divide(40, 20)); // 2

As you can see above we have directly called the static methods without initialising the class since they are static functions.

Conclusion

Javascript provides very efficient way to organise the data with object-oriented way. With classes, we can implement reusable and more readable code. Also organising the data with object-oriented approach is easier with JavaScript.

That is all.

Burak Hamdi TUFAN


Tags


Share this Post

Send with Whatsapp

Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment. Check your inputs!

Comments

  • There is no comment. Be the owner of first comment...